Wikipédia:TemplateStyles
TemplateStyles permitem que páginas personalizadas de CSS sejam usadas para estilizar conteúdo sem que um administrador de interface precise editar o CSS do site. O TemplateStyles torna mais conveniente para os editores estilizar predefinições; por exemplo, aquelas em que o CSS global do site para a skin móvel ou outra skin (como a Timeless) atualmente afeta negativamente a exibição da predefinição.
O TemplateStyles funciona em todos os tipos de páginas, não apenas em predefinições, apesar do nome.
Diretrizes
[editar código-fonte]- O estilo deve se aplicar apenas à saída da predefinição associada. Também pode se aplicar ao wikitexto altamente relevante próximo ao local onde a predefinição é usada. (Por exemplo, existem muitas predefinições de tabelas que deveriam ter TemplateStyles fornecidos inteiramente dentro das predefinições ou que podem fornecer uma legenda para uma tabela em wikitexto.) Caso contrário, seria confuso se adicionar uma predefinição a uma parte da página alterasse parcial ou totalmente a exibição ou o estilo de outra parte não relacionada da página.
- Páginas de estilo devem estar associadas a uma predefinição específica ou a um grupo de predefinições e serem nomeadas de acordo. Isso permite que as páginas de estilo sejam facilmente identificadas e editadas. Em geral, isso significa que uma página de estilo deve ser uma subpágina da predefinição relacionada, por exemplo: Predefinição:minhaPredefinição/styles.css ou Predefinição:minhaPredefinição/styles-foo.css, mas não Predefinição:styles-foo.css nem Predefinição:foo.css.
- Siga, em geral, as convenções de codificação do MediaWiki para CSS. Algumas especificidades:
- Use seletores que sejam altamente exclusivos da predefinição em uso. Isso reduz a chance de conflitos acidentais entre regras de CSS. Exemplos: Use .minhaPredefinição-linha em vez de .linha, ou .minhaPredefinição tr em vez de tr.
- Evite usar #id, conforme as convenções. IDs em HTML devem ser únicos em uma página. Predefinições raramente são usadas de forma única, e aquelas inicialmente projetadas para um único uso por página podem ser posteriormente reutilizadas de maneiras inesperadas. Prefira classes em vez de IDs para estilização.
- Evite usar !important, conforme as convenções, exceto em visualizações móveis para substituir estilos aplicados pela predefinição associada. O uso de
!importantem TemplateStyles é especialmente difícil de sobrepor devido à ordem de carregamento dos estilos (CSS pessoal seguido por TemplateStyles).
- Em predefinições destinadas a serem substituídas ou que provavelmente serão, use {{ifsubst}} para remover a tag de TemplateStyles. Exemplo: {{allcaps}}.
- Estilos inline podem ser usados como alternativa ao TemplateStyles quando a predefinição for substituída. Exemplo: {{smallcaps}}.
- Apenas imagens que não exigem atribuição (ou seja, imagens em domínio público) podem ser usadas como imagens de fundo. Para o uso normal de arquivos, a atribuição é fornecida na página de descrição do arquivo, acessível ao clicar na imagem. Isso não é possível quando a imagem é usada como plano de fundo.
- O nível de proteção das páginas de estilo deve corresponder ao de sua predefinição associada. Se uma predefinição for de alto risco, então seus estilos também são de alto risco e devem ter o mesmo nível de proteção. Se uma predefinição não for de alto risco, vandalismos que causem problemas poderiam ser feitos editando a própria predefinição. Um nível de proteção mais alto para a página de estilo incentivaria editores a adicionar estilos inline à predefinição, já que a predefinição seria editável, mas a página de estilo não. Qualquer predefinição que use páginas CSS com nível de proteção incorreto será categorizada em
Categoria:!Predefinições utilizando TemplateStyles com diferentes níveis de proteção.
Vale lembrar que o Livro de estilo, incluindo as recomendações de acessibilidade, ainda se aplica.
Fluxo de trabalho para conversão
[editar código-fonte]1. Em Predefinição:minhaPredefinição, identifique todos os estilos inline que podem ser movidos para uma folha de estilos separada.
2. Crie Predefinição:minhaPredefinição/styles.css contendo todas as classes que substituirão os estilos inline. Use nomes de classes específicos da predefinição sempre que possível.
3. Em Predefinição:minhaPredefinição (ou em sua Predefinição:minhaPredefinição/Testes, se quiser testar primeiro), adicione <templatestyles src="minhaPredefinição/styles.css" /> (não é necessário especificar o namespace "Predefinição"). É recomendável colocá-lo no topo para que fique visível e para evitar um flash de conteúdo sem estilo, mas ele precisará estar em uma linha separada se a predefinição começar com marcação wiki que exige uma nova linha (por exemplo, tabelas wiki).
4. Modifique a predefinição (ou a página de testes) para substituir os estilos inline pelas classes definidas em Predefinição:minhaPredefinição/styles.css.
5. Faça todas as verificações possíveis. Se testou na página de testes, verifique a página de exemplos de testes, se existir, e confira especificamente se os estilos renderizam corretamente.
- Especialmente para predefinições destinadas ao uso inline, verifique se há usos dentro de links. Predefinições com TemplateStyles não funcionam dentro de links (por enquanto).
6. Se usou a página de testes, faça um pedido de edição para a predefinição principal ou realize a atualização se estiver confiante nas alterações.
7. Solicite ou ajuste o nível de proteção de Predefinição:minhaPredefinição/styles.css para corresponder ao de Predefinição:minhaPredefinição, se necessário.
8. Adicione {{Utiliza TemplateStyles}} à documentação da predefinição para indicar quais folhas de estilo TemplateStyles ela utiliza.
Dicas
[editar código-fonte]- O uso de folhas de estilo do TemplateStyles é registrado da mesma forma que a transclusão de predefinições e a invocação de módulos Scribunto. A página Special:WhatLinksHere e a seção "Predefinições usadas nesta pré-visualização" abaixo do formulário de edição funcionarão normalmente para eles.
- Quando
{{Utiliza TemplateStyles}}é colocado na documentação de uma predefinição, ela é adicionada à Categoria:!Predefinições com TemplateStyles. Se a folha de estilo TemplateStyles tiver um nível de proteção inferior, a predefinição será rastreada em Categoria:!Predefinições utilizando TemplateStyles com diferentes níveis de proteção (26 páginas).
- Mover uma página de CSS sanitizado não criará um redirecionamento.
Substituindo TemplateStyles
[editar código-fonte]Devido à forma como o TemplateStyles é implementado, sobrescrever seus estilos no seu CSS pessoal requer um pouco mais de esforço do que o normal. As regras em uma folha de estilo TemplateStyles não representam todas as regras de CSS, nem é possível corresponder diretamente os seletores para sobrescrevê-los.
1. Cada seletor é "elevado" para .mw-parser-output, então, para sobrescrever uma regra em uma folha TemplateStyles que se parece com .documentation {}, uma substituição ingênua no seu arquivo CSS pessoal precisaria ser escrita como .mw-parser-output .documentation {}.
2. No entanto, no HTML, cada estilo TemplateStyles é sempre carregado após o seu arquivo CSS pessoal. Portanto, a nova regra precisaria ter uma especificidade maior. Há algumas maneiras de fazer isso: A mais simples é selecionar também o elemento HTML, como em: .mw-parser-output div.documentation {}.
Outra forma seria duplicar um dos seletores de classe, como em .mw-parser-output.mw-parser-output .documentation {} ou .mw-parser-output .documentation.documentation {}. Esta última abordagem é um pouco mais à prova de futuro, mas parece um pouco estranha.
3. Por fim, !important pode sempre sobrescrever estilos no seu CSS pessoal. No entanto, aplicam-se as advertências usuais sobre o uso de !important. Prefira uma das duas opções anteriores, se possível. (Isso é necessário para sobrescrever estilos inline, independentemente das opções acima; algumas predefinições não podem mover tudo para TemplateStyles devido à flexibilidade concedida aos usuários das predefinições. Os implementadores de predefinições devem considerar se parâmetros como style e width são realmente necessários. Veja também phab:T200632.)
Exemplos
[editar código-fonte]- mw:Help:TemplateStyles/examples
- Predefinição:Termômetro e Predefinição:Termômetro/styles.css fornecem uma demonstração simples de como o TemplateStyles pode ser combinado com estilos inline (quando um parâmetro é passado para alterar um ou mais estilos).