Pré-processadores CSS e Seletores Parent

31.03.2014
|
0 comentários
|

Trabalhar com sites e web apps que requerem suporte de exibição da direita para a esquerda (RTL) é difícil porque garantir que o RTL será mostrado corretamente é um pouco complicado, devido ao fato que nós ou não temos as propriedades e valores CSS para fazer isso ou que o suporte existente ainda não é largamente utilizado. Temos valores como start para text-align e propriedades como –moz-margin-start, mas eles não são suportados em todo lugar, apesar de RTL ser um aspecto importante no aspecto global.

Então, o que podemos fazer, afinal? Repetir os seletores com um novo valor RTL e algumas vezes um offset:

1

  • Se você tem que mudar sua estrutura CSS aninhada, deve lembrar de fazer isso para o bloco RTL em separado tambémEu considero isso um pesadelo, por algumas razões:
  • Se você tem que compensar a regra original, precisa lembrar de fazer isso e inserir uma nova regra

Mexendo com Stylus, eu encontrei uma solução excelente para curar todos esses problemas com um simples mixin:

2

Eu sei que LESS também funciona para este padrão, mas não tenho certeza se SASS faz. O que é legal também é que o RTL não é o único cenário onde isso é útil: você poderia usar isso para coisas baseadas em features, como classes CSS Modernizr:O mixin acima é simples, mas me faz entrar em um estado de euforia. Ao invés de ter que copiar e manter a estrutura aninhada, o mixin me permite setar os valores de propriedade para LTR (exibição da esquerda para a direita) e RTL no mesmo local do código, evitando a necessidade de criar blocos RTL separados. E este cenário, de apenas mudar as propriedades dependendo da direção, cobre 95% dos cenários de direção.

3

Sensacional! Essa simples estrutura faz com que codar o CSS e organizar diferentes estados seja um milhão de vezes mais fácil! Em um mundo ideal, os valores e propriedades “start” estariam no lugar correto, mas, até lá, use esse tipo de estratégia para facilitar a sua vida!

***

Fonte: Imasters

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.