Wikipedia: estilos de plantilla

Guía del proyecto Wikimedia para TemplateStyles

TemplateStyles permite utilizar páginas CSS personalizadas para diseñar contenido sin que un administrador de interfaz tenga que editar CSS en todo el sitio. TemplateStyles hace que sea más conveniente para los editores diseñar plantillas; por ejemplo, aquellas plantillas para las cuales el CSS de todo el sitio para la máscara móvil u otra máscara (por ejemplo, Timeless) actualmente afecta negativamente la visualización de la plantilla.

TemplateStyles funciona en todo tipo de páginas, no solo en plantillas, a pesar del nombre.

Pautas

• El estilo debe aplicarse únicamente a la salida de la plantilla asociada. También puede aplicarse a wikitexto cercano y de gran relevancia donde se utiliza la plantilla. (Por ejemplo, hay muchas plantillas de tablas que deberían tener TemplateStyles que se proporcionan completamente en las plantillas, o que pueden proporcionar una leyenda para una tabla de wikitexto). De lo contrario, sería confuso si agregar una plantilla a una parte de una página fuera completamente o cambiar parcialmente la visualización o el estilo de una parte no relacionada de la página.
• Las páginas de estilo deben asociarse con una plantilla o grupo de plantillas específicas y recibir el nombre correspondiente. Esto permite identificar y editar fácilmente las páginas de estilo. En general, esto significa que una página de estilo debe ser una subpágina de la plantilla relacionada, por ejemplo: Plantilla : myTemplate /styles.css o Plantilla : myTemplate /styles-foo.css , pero no Plantilla:styles- foo.css ni Plantilla : foo.css .​
• Generalmente siga las convenciones de codificación de MediaWiki para CSS. Algunos detalles:
  • Utilice selectores que probablemente sean exclusivos de la plantilla que se utiliza. Esto reduce la posibilidad de que surjan reglas CSS conflictivas accidentalmente. Ejemplos: uso . myTemplate -row en lugar de .row o . myTemplate tr en lugar de tr .
  • Evite usar #id según las convenciones. Se supone que los ID HTML son únicos en una página. Las plantillas rara vez se utilizan de forma única, y aquellas que inicialmente son de un solo uso por página a menudo se utilizan posteriormente de formas imprevistas. Utilice clases en lugar de ID para diseñar.
  • Evite el uso de !important según las convenciones, excepto en vistas móviles para anular la entrada de estilo de la plantilla asociada. El uso de !importanten TemplateStyles es excepcionalmente difícil de anular debido al orden de carga de los estilos (CSS personal y luego TemplateStyles).
• En las plantillas que se pretende sustituir, o aquellas que probablemente se sustituirán, utilice {{ ifsubst }} para eliminar la etiqueta TemplateStyles. Ejemplo: {{ mayúsculas }}.
  • Los estilos en línea se pueden utilizar como caso "si se sustituye" en una plantilla sustituida. Ejemplo: {{ minúsculas }}.
• Las imágenes que no requieren atribución (es decir, aquellas que son de dominio público) son las únicas imágenes que pueden usarse como imágenes de fondo. Para el uso normal del archivo, la atribución se proporciona en la página de descripción del archivo, a la que se accede haciendo clic en la imagen. Esto no es posible si la imagen se utiliza como fondo.
• El nivel de protección de las páginas de estilo debe coincidir con el de su plantilla asociada. Si una plantilla es de alto riesgo , entonces sus estilos también lo son y deberían tener la misma protección. Si una plantilla no es de alto riesgo, entonces se podría lograr que el vandalismo cause caos simplemente editando la plantilla misma. Un nivel de protección más alto para la página de estilo alentaría a los editores a agregar estilos en línea a la plantilla, ya que la plantilla sería editable pero la página de estilo no. Cualquier plantilla que utilice páginas CSS con un nivel de protección incorrecto se clasificará en Categoría:Plantillas que utilizan TemplateStyles con un nivel de protección diferente .
• Recuerde agregar /* {{pp-template}} */a cualquier página CSS protegida para asegurarse de que muestren el ícono de candado apropiado. Las plantillas protegidas que utilizan páginas CSS que carecen del icono de candado se clasificarán en Categoría:Plantillas que utilizan TemplateStyles sin candados .

Tenga en cuenta que el Manual de Estilo , incluidas las Directrices de Accesibilidad , sigue siendo aplicable.

Flujo de trabajo para la conversión

1. En Plantilla: myTemplate , identifique todos los estilos en línea que se pueden mover a una hoja de estilo separada.
2. Crear plantilla: myTemplate /styles.css que contiene todas las clases que reemplazarán los estilos en línea. Utilice nombres de clases específicos de la plantilla siempre que sea posible.
3. En Plantilla: myTemplate (o su Plantilla: myTemplate /sandbox si desea probar primero), agregue (no es necesario especificar la Plantilla: espacio de nombres). Probablemente sea mejor en la parte superior para que sea obvio y evitar un destello de contenido sin estilo , pero tendrá que estar en su propia línea si la plantilla comienza con un marcado wiki que debe comenzar en una nueva línea (por ejemplo, wiki-table ).<templatestyles src="myTemplate/styles.css" />
4. Modifique la plantilla (o sandbox) para reemplazar los estilos en línea con las clases que definió en Plantilla: myTemplate /styles.css
5. Haz todas las comprobaciones que puedas. Si realizó la prueba en la zona de pruebas, puede consultar la página de casos de prueba donde existe, pero verifique específicamente que los estilos afectados se representen correctamente.
   1. Específicamente, para las plantillas destinadas a usarse en línea, verifique si hay usos dentro de los enlaces. Las plantillas TemplateStyles no funcionarán dentro de los enlaces (en este momento).
6. Si utilizó la zona de pruebas, realice una solicitud de edición para la plantilla principal o realice la actualización si está seguro de los cambios.
7. Solicite o modifique el nivel de protección de Plantilla: myTemplate /styles.css para que coincida con el de Plantilla: myTemplate según sea necesario.
8. Agregue a la documentación de la plantilla para mostrar qué hojas de estilo TemplateStyles utiliza.{{Uses TemplateStyles}}

Consejos

• Los usos de las hojas de estilo TemplateStyles se registran al igual que la transclusión de plantillas y la invocación del módulo Scribunto. Special:WhatLinksHere y la sección "Plantillas utilizadas en esta vista previa" debajo del formulario de edición funcionarán de la manera habitual.
• Para buscar hojas de estilo TemplateStyles, puede buscar contentmodel:sanitized-css . Consulte también mw:Ayuda:CirrusSearch#Contentmodel.
• Cuando se coloca en la documentación de una plantilla, agrega la plantilla a Categoría:Plantillas usando TemplateStyles . Si la hoja de estilo TemplateStyles tiene un nivel de protección más bajo, se realizará un seguimiento de la plantilla en Categoría:Plantillas utilizando TemplateStyles con un nivel de protección diferente (0 páginas).{{Uses TemplateStyles}}
• Los experimentos de TemplateStyles se pueden crear en Template:TemplateStyles sandbox , por ejemplo, para usar en los experimentos del módulo Module:Sandbox .
• Las páginas TemplateStyles se pueden crear fuera de los espacios de nombres de plantilla o módulo creándolas primero en el espacio de nombres de plantilla y moviéndolas o (para administradores y editores de plantillas) usando Special:ChangeContentModel . Independientemente del método que se utilice, la creación de una página .css en el espacio de usuario solo puede realizarla el usuario en cuestión o un administrador de interfaz, pero una vez creada, cualquiera puede editarla.
• Mover una página CSS desinfectada no creará una redirección.

Anulación de estilos de plantilla

Debido a la forma en que se implementa TemplateStyles, anular TemplateStyles en su CSS personal requiere un poco más de esfuerzo de lo normal. Las reglas en una hoja TemplateStyles específica no son las reglas CSS completas, ni puedes hacer coincidir los selectores para anularlas.

1. Cada selector se "eleva" a .mw-parser-output, por lo que para anular una regla en una hoja TemplateStyles que se vea así .documentation {}, una anulación ingenua en su archivo CSS personal debería verse así .mw-parser-output .documentation {}.
2. Sin embargo, en HTML, cada estilo TemplateStyles siempre se coloca después de que se carga su archivo CSS personal. En consecuencia, la nueva norma debería ser más específica. Eso puede ocurrir de dos maneras. Lo más fácil es seleccionar el elemento HTML también como en: .mw-parser-output div.documentation {}. Otra forma sería duplicar uno de los selectores de clases, como en .mw-parser-output.mw-parser-output .documentation {}o .mw-parser-output .documentation.documentation {}. Esta última forma está un poco más preparada para el futuro, pero parece un poco más extraña.
3. Por último, !importantsiempre puedes anular los estilos en tu CSS personal. Se aplican las advertencias habituales al respecto !important. Prefiera una de las dos opciones del punto dos si es posible. (Debe hacer esto para anular los estilos en línea, independientemente de lo anterior; algunas plantillas no pueden mover todo a TemplateStyles según la flexibilidad brindada a los usuarios de plantillas. Los implementadores de plantillas deben considerar si los parámetros como styley widthson realmente necesarios. Consulte también phab:T200632 .)

Ejemplos

• mw:Ayuda:Estilos de plantilla/ejemplos
  • mw:Plantilla:Elegante (CSS)
  • mw:Plantilla:ResponsiveAmboxEjemplo (CSS)
• Plantilla:Termómetro y Plantilla:Termómetro/styles.css ofrecen una demostración sencilla de cómo se pueden mezclar TemplateStyles con estilos en línea (donde se pasa un parámetro para cambiar uno o más estilos)

Ver también

• Wikipedia: Lua
• Charla de MediaWiki:Common.css/to do , donde se realiza el seguimiento de la conversión de Common.css, Mobile.css y skin.css a TemplateStyles

enlaces externos

• mw:Extensión:TemplateStyles
• mw:Ayuda:Estilos de plantilla