Locaweb - Edição 50

57 / 68

57
REVISTA LOCAWEB
Sobre o autor
Homero Ottoni é
programador e
sócio-proprietário da
empresa Make Media de
desenvolvimento web.
[TODO O CONJUNTO, INCLUINDO AS IMAGENS, É RESPONSIVO
EM SUAS RESTRIÇÕES. ELE REFLETE AS MUDANÇAS DE TELA E
DE RESOLUÇÃO EM DIFERENTES DISPOSITIVOS]
LW
Responsivo:
GSS garante boa
formatação em
PCs, tablets e
smartphones
a ambiguidade que pode surgir
a partir de uma linguagem de
descrição baseada em restrições.
8P HOHPHQWR PDO GHíQLGR HP VXDV
restrições pode confundir o sistema
e ser exibido incorretamente.
Esta linha mostra um exemplo
de ambiguidade no código, por falta
GH GHíQL©·HV GH UHVWUL©·HV
#box[right] ==
::window[right];
O que o elemento #box deve
fazer? Deve se alinhar à direita da
janela ou se “esticar” até ajustar
sua lateral ao lado direito da
janela? Aumentar a propriedade
“width” ou mudar a posição do
#box na tela? A melhor prática é
sempre restringir completamente
R REMHWR HVSHFLíFDQGR
adequadamente a posição e o
tamanho de um objeto.
SELETORES
ESPECIAIS (SPECIAL
PSEUDO SELECTORS)
Há três tipos de seletores no
GSS, conforme descrição abaixo:
::window
:: ou ::this
::parent
O seletor window HVSHFLíFD
a janela do navegador em que o
código está sendo aplicado.
O seletor :: ou::this indica
o próprio objeto ou elemento
referenciado pelo código (como
visto em algumas linhas dos
códigos anteriores).
O seletor ::parent é usado
para “ligar” variáveis de formas
diversas. Um padrão recomendado
« XVDU Û Ü FRPR SUHí[R GH
variáveis, para não confundir com o
código do CSS, se existir.
Este código serve de exemplo
para o uso de seletores:
#product {
$col-width: == ::[width]
/ 12 !require;
$col-left: == ::[left] +
Em , há muita documentação sobre o GSS
::[$col-width];
.price {
left: == ::parent[$col-
left];
width: == ::parent[$col-
width];
}
O elemento #product tem
VXD UHVWUL©¥R FRO ZLGWK GHíQLGD
como sua própria largura dividida
por 12. Já o elemento .price tem a
SURSULHGDGH ÛZLGWKÜ GHíQLGD FRPR
sendo igual à propriedade
$col-width do elemento #product.
CONCLUSÃO
O GSS não elimina a
necessidade do CSS, como o
CSS não acabou com o HTML.
São recursos que evoluem
para ampliar as capacidades
e separar a codificação a
partir das capacidades mais
específicas de cada padrão.
Ainda é importante usar cada
recurso para sua função mais
adequada, tornando mais
eficiente e rápida a codificação
e a elaboração das páginas: CSS
para formatação e GSS para
controle de posição e elementos
dinâmicos e ajustáveis. Mais
informações sobre GSS
podem ser obtidas no site
KWWS JULGVW\OHVKHHWV RUJ.