Extensão | .css |
---|---|
Tipo MIME | text/css |
Desenvolvido por | Grupo de Trabalho CSS ( em ) |
Versão inicial | 17 de dezembro de 1996 |
Sites |
www.w3.org/Style/CSS drafts.csswg.org |
As Cascading Style Sheets , comumente chamadas de CSS of English Cascading Style Sheets , formam uma linguagem de computador que descreve a apresentação de documentos HTML e XML . Os padrões que definem CSS são publicados pelo World Wide Web Consortium (W3C). Introduzido em meados da década de 1990 , o CSS tornou-se amplamente usado em web design e bem suportado por navegadores da web na década de 2000 .
O conceito de folha de estilo está presente desde o início da World Wide Web : o primeiro navegador WorldWideWeb permite que documentos sejam formatados usando o que hoje seria considerada uma “folha de estilo do usuário”. Da mesma forma, os navegadores Viola em 1992 e Harmony em 1993 usam um mecanismo semelhante para determinar a renderização de fontes , cores ou alinhamento de texto.
No entanto, esses não são estilos determinados pelo autor do documento. HTML também faltam elementos de apresentação em seus primeiros anos, por isso, havia uma pressão crescente para navegadores para permitir que os autores para determinar o layout de páginas próprias web , em uma abordagem derivada da eletrônica de impressão publicação. .
Foi neste contexto, em 1994 - 1995 , que o novíssimo Netscape Navigator introduziu os primeiros elementos de apresentação HTML por iniciativa de Marc Andreessen , enquanto as primeiras propostas de estilos externos surgiram simultaneamente:
O aparecimento de CSS responde a um desejo de "oferecer uma alternativa à evolução do HTML de uma linguagem de estruturação para uma linguagem de apresentação".
Um terceiro caminho de desenvolvimento também foi aberto ao mesmo tempo: a linguagem de transformação DSSSL de documentos SGML , desenvolvida por James Clark , sugere a possibilidade de uma linguagem de estilo que não é apenas descritiva e se aproxima de uma linguagem de programação real . Este caminho é seguido pela Netscape, que em 1996 propôs ao W3C as “Folhas de Estilo Baseadas em JavaScript” (JSSS), implementadas pelo Netscape Navigator 4 em 1997 .
As origens do CSS estão, portanto, ligadas a três possibilidades principais:
A primeira proposta de Cascading HTML Style Sheets feita por Håkon Wium Lie chama a atenção de Dave Raggett , que era então o principal editor da especificação HTML 3.0 proposta. Proponente do HTML puramente estrutural, ele incentivou a publicação de um documento de trabalho do CHSS, para que pudesse ser apresentado e discutido na segunda conferência internacional sobre a WWW ( Mosaic and the Web , Chicago, 1994). Ele também modificou com o navegador Håkon Lie the Arena , a fim de testar esta linguagem, e o demonstrou na terceira conferência WWW em 1995.
Ao mesmo tempo, Bert Bos , que estava trabalhando no navegador Argo na época , e que havia enviado sua própria “ Proposta de Folha de Estilo Baseada em Fluxo ” (SSP) ao W3C , decidiu unir seus esforços aos de Håkon Lie. Tendo o SSP sido desenvolvido com a ideia de ser aplicável não apenas ao HTML, mas também a outras linguagens de marcação, Bert Bos e Håkon Lie assumem esse objetivo e fazem dele uma das características principais do que então se torna CSS propriamente dito.
Outro aspecto do CSS é, portanto, decisivo em face das alternativas existentes: CSS é a primeira linguagem a incluir a ideia de "cascata" (folha de estilo em cascata ), ou seja, a possibilidade de o estilo de 'um documento ser herdado de várias "folhas de estilo". Isso torna possível arbitrar entre várias fontes concorrentes de formatação de um elemento e, portanto, responde à necessidade de compor entre as preferências estilísticas dos autores e dos usuários.
O World Wide Web Consortium (W3C) tornou-se operacional em 1995, e a lista de correio estilo www foi criada. No mesmo ano foi realizado em Paris um “workshop de folhas de estilo W3C” decisivo para o futuro do CSS. Em particular, afirma o desejo de manter as folhas de estilo em um formato simples, o que exclui a hipótese JSSS da Netscape. Além disso, Thomas Reardon (Microsoft) anuncia o futuro suporte de CSS em futuras versões do Internet Explorer : portanto, quando o W3C criar no final do ano o " HTML Editorial Review Board " (HTML ERB) para ratificar o futuro HTML, Especificações DOM e CSS, Netscape, representado por Lou Montulli , finalmente se junta ao projeto CSS liderado por Bert Bos e Håkon Lie.
Ao contrário do software , as especificações CSS não são desenvolvidas em versões sucessivas, o que permitiria a um navegador referir-se a uma determinada versão. CSS é desenvolvido por "níveis", o que força cada novo nível a integrar o anterior, e cada implementação a ser compatível com o anterior: CSS1 é, portanto, desenvolvido para ser um subconjunto de CSS2, que é desenvolvido para ser um subconjunto de CSS3. Isso explica em parte a lentidão do avanço normativo do CSS.
A especificação final do CSS1 foi publicada em 17 de dezembro de 1996 e definiu cerca de cinquenta propriedades. CSS1 é definido como um "mecanismo de folha de estilo simples, permitindo que autores e leitores anexem estilos (...) ao documento HTML". Esta simplicidade se traduz na escolha de uma linguagem que pode ser facilmente lida e escrita diretamente por seus usuários humanos, e de uma terminologia de acordo com os usos comuns na publicação de computador. A possibilidade de expressar CSS em uma sintaxe XML ou SGML, regularmente mencionada para evitar a implementação de um novo modo de análise sintática, está, portanto, definitivamente descartada.
CSS1 não descreve apenas sua própria gramática : este primeiro nível descreve de fato uma gramática destinada a permitir que os níveis subsequentes adicionem novas funcionalidades, enquanto permite a leitura dessas folhas de estilo futuras pelas implementações originais. Esses novos recursos não serão compreendidos pelas implementações originais, mas podem ser identificados como tal e ignorados. CSS, portanto, garante sua compatibilidade com versões anteriores .
CSS1 define essencialmente as propriedades de renderização tipográfica do texto: fontes (fontes), cor, tamanho da fonte, peso , espaçamento, bordas e gerenciamento de marcadores de lista.
Portanto, não há questão de "layout" ainda: a propriedade float, que posteriormente será usada extensivamente para o layout CSS geral de designs da web, é então concebida apenas como um meio de colocar localmente, ao lado dele, uma pequena parte do conteúdo, como uma imagem, e o resto do texto. Dadas as implementações problemáticas do CSS1, o sequestro do elemento HTML tablepara manipular o layout geral continua sendo a solução mais comum para os autores de conteúdo da web por enquanto.
Em 1996, o Internet Explorer 3.0 foi o primeiro navegador comercial a implementar CSS parcialmente enquanto ele ainda estava sendo formulado. Esta implementação inicial, liderada por Chris Wilson, não corresponde à especificação final. Em 1997, o Internet Explorer 4.0 viu nascer um novo motor de renderização , o Trident , na origem do crescente mas problemático suporte para CSS nas várias versões deste navegador em Windows, até ao Internet Explorer 7 incluído.
O Netscape Navigator 4.0 seguiu o exemplo em 1997, apesar de sua relutância histórica em relação ao CSS: no contexto da guerra dos navegadores , o principal era evitar que a Microsoft pudesse se afirmar como o navegador mais compatível. No entanto, essa implementação apressada, baseada em métodos JavaScript internos, acaba se revelando limitada e pouco confiável. O Netscape Navigator 4.0 também traz uma implementação JSSS, que passará despercebida. Teremos que esperar pelo novo motor de renderização Gecko do projeto Mozilla para conseguir uma implementação verdadeira do CSS1.
Em 1998, quando a guerra dos navegadores entre a Netscape e a Microsoft chegou ao fim, o Opera 3.5, do qual Håkon Lie havia se tornado o diretor técnico, conseguiu uma implementação mais completa do CSS1, facilitada pela publicação do primeiro "Conjunto de testes para Cascading Style Sheets (CSS) Nível 1 ”, criado principalmente por Eric Meyer para o W3C. A presença dessas suítes de teste está se mostrando uma grande vantagem tanto para implementações em navegadores quanto para a apropriação de técnicas CSS pelos autores (fornecendo exemplos detalhados das propriedades e seus valores).
Finalmente, sob a liderança de Tantek Çelik , o Internet Explorer 5.0 para Macintosh lançado em março de 2000 , baseado no Tasman , um mecanismo de renderização específico não relacionado ao Trident, é o primeiro navegador a oferecer suporte total (mais de 99%) ao CSS1. Para garantir a compatibilidade com as práticas de codificação anteriores específicas para cada implementação (a “sopa de tags”), e para permitir a exibição correta de documentos da web, respeitem os padrões CSS e HTML ou não, ele também é o primeiro a implementar a técnica de troca de doctype . Posteriormente adotado por todos os navegadores, este mais tarde se tornou uma das chaves para a implementação progressiva do CSS: ele de fato permite ao navegador manter implementações proprietárias antigas por razões de compatibilidade, ao mesmo tempo que tem a possibilidade de optar, de acordo com a sintaxe da declaração do tipo de documento da página, para um modo de renderização em conformidade com as novas implementações padrão.
Durante o período do final da década de 1990, o design da web dependia principalmente do uso de HTML como formato de apresentação. A derrota da Netscape no final da guerra dos navegadores, a renovação que se seguiu por meio do projeto Mozilla, o surgimento do IE5 Mac e, em menor grau, a evolução do Internet Explorer Windows 5.x, no entanto, no início dos anos 2000 , iniciou-se uma nova etapa na evolução das práticas de design de sites pelos autores: esses navegadores de fato permitem mostrar que práticas históricas que datam da época da guerra dos navegadores, mesclando estrutura e apresentação, podem na verdade ser abandonadas em favor de uma abordagem baseado em folhas de estilo e respeito mais geral pelos padrões da web (no sentido de HTML e CSS). Jeffrey Zeldman , co-fundador do Web Standards Project e fundador do A List Apart (in) em 1998, aparece então como a figura emblemática desse movimento de promoção de padrões . Ele também é a inspiração para uma abordagem de design “híbrido”, aproveitando as técnicas de CSS enquanto permanece temporariamente dentro da estrutura de formatação de documentos com base em tabelas de apresentação.
CSS2, ambições apressadasPara atender às necessidades que a primeira especificação CSS1 ainda não atendia, o CSS foi atribuído em 1997 a um novo grupo de trabalho dentro do W3C, presidido por Chris Lilley . Em 2007, esse grupo incluiu representantes da Apple , Google , IBM , Microsoft , Adobe , Mozilla Foundation e Opera .
Lançado como recomendação em maio de 1998 , o segundo nível de CSS amplia consideravelmente as possibilidades teóricas de folhas de estilo em cascata, em particular com cerca de 70 propriedades adicionais. Além da formatação tipográfica do texto iniciada com CSS1:
No entanto, essa riqueza funcional encontra apenas um eco limitado em suas implementações:
Várias causas são mencionadas para explicar essas dificuldades e a lentidão das implementações CSS2:
O feedback da implementação do CSS2 levou o grupo de trabalho W3C CSS a escrever a partir de 2001 uma versão revisada do CSS 2.1 (" CSS Nível 2, Revisão 1 "), com base no que foi realmente adotado pelos vários navegadores. Os objetivos desta revisão são:
CSS 2.1 corrige CSS2 em muitos pontos de detalhe, remove certas seções no todo ou em parte (os estilos vocais definidos sob o tipo de mídia " aural ", os estilos de impressão, as fontes para download, das quais as definições mais convincentes são rejeitadas no futuro CSS3), e o explica com base em descobertas atualizadas durante as implementações (gerenciamento avançado de blocos flutuantes por meio de “contextos de formatação”).
Depois de experimentar 8 versões sucessivas, o CSS 2.1 é em julho de 2007 um candidato a recomendação, ou seja, o padrão que as implementações devem seguir.
Em 2007 , nenhum navegador tinha de fato concluído a integração do CSS 2.1: isso seria implementado em 56% pelo Internet Explorer 7, 91% pelo Firefox 2 e 94% pelo Opera 9. Além disso, apenas uma parte dos navegadores gráficos superou com sucesso ou manteve como objetivo o teste Acid2 , lançado em 2005 pelo Web Standards Project , por iniciativa da Håkon Lie, em particular para promover a implementação de uma escolha de funcionalidades CSS 2.1 consideradas o principal progresso necessário: o posicionamento de elementos durante a exibição, generalização do modelo de renderização da tabela para todos os elementos, conteúdo gerado via CSS. O uso profissional de CSS, portanto, permanece limitado a um subconjunto arbitrário dele, determinado por implementações comuns.
O desenvolvimento do terceiro nível de folhas de estilo em cascata começou já em 1999, junto com o CSS 2.1.
CSS3 está se tornando “modular”, a fim de facilitar suas atualizações, mas também sua implementação por agentes usuários com capacidades e necessidades cada vez mais variadas (navegadores gráficos, navegadores móveis, navegadores de voz). Os navegadores podem, portanto, implementar subconjuntos de CSS3.
Portanto, o grau de progresso do CSS3 varia de acordo com os módulos e o grau de prioridade dado a eles pelo grupo de trabalho do CSS. Em 2007, os módulos mais avançados (recomendações de candidatos) dizem respeito a:
Noutros casos, os módulos podem atingir a fase de recomendação do candidato, mas posteriormente regressar à fase de documento de trabalho devido a dificuldades de actualização na sequência do convite à implementação. É o caso, por exemplo, do módulo de tipografia “Texto CSS”.
Da mesma forma, as implementações variam de acordo com as estratégias e necessidades dos diferentes navegadores:
Um programador holandês, Jori Koolstra, propôs em 2002 a noção de folhas de estilo em cascata dinâmica .
Alguns membros do grupo de trabalho CSS, bem como desenvolvedores da web, levantaram a questão do progresso lento do CSS3:
Em 2008, nenhum módulo foi considerado concluído pelo W3C, e a implementação em navegadores é, portanto, marginal, muitas vezes como um teste, como as funções -moz-xxx do motor Gecko , cujo prefixo limita o uso apenas para navegadores baseados no Gecko.
A redação do quarto nível de folhas de estilo em cascata começa em 2010, junto com os módulos CSS 3.
Alguns módulos sendo congelados ou em processo de congelamento, são lançados rascunhos para continuar a ampliar as possibilidades deste último. O trabalho, portanto, é feito em adição à camada anterior, ou mesmo levando-se a camada inferior para os seletores.
Um dos principais objetivos do CSS é permitir a formatação fora dos documentos. É possível, por exemplo, descrever apenas a estrutura de um documento em HTML e descrever toda a apresentação em uma folha de estilo CSS separada. Os estilos são aplicados no último momento, no navegador da web dos visitantes que visualizam o documento. Essa separação oferece uma série de benefícios, tornando possível melhorar a acessibilidade , alterar a apresentação com mais facilidade e reduzir a complexidade da arquitetura de um documento.
Assim, as vantagens das folhas de estilo são múltiplas:
CSS permite definir a renderização de um documento de acordo com a mídia de renderização e suas capacidades (tipo de monitor ou dispositivo de voz ), as do navegador ( texto ou gráfico), bem como as preferências de seu usuário.
As folhas de estilo podem ser diferenciadas para as seguintes mídias, de acordo com CSS2.1:
Outros tipos de mídia são teoricamente previstos pela especificação CSS2.1, mas não são implementados por agentes do usuário: braillee embossedpara tablets e gravadores braille, bem como ttypara teleimpressoras .
Em cada meio, os estilos de apresentação determinados pelo autor do documento são combinados com os padrões do agente do usuário e aqueles derivados das preferências do usuário e configuração pessoal.
As capacidades do receptor podem ser tidas em consideração pelos autores, destinadas aos agentes de utilizador que implementam o módulo CSS3 " media queries ": isto permite condicionar a consideração de uma folha de estilo a constrangimentos relativos em particular à resolução ou ao capacidade de restaurar cores.
Cascata de estilosA "cascata" é a combinação de diferentes fontes de estilos aplicados a um mesmo documento, de acordo com seus respectivos graus de prioridade. Diferentes modos em cascata podem ser combinados:
A renderização de um documento elegante é determinada pelos conceitos de caixa e fluxo. O mecanismo de renderização CSS estabelece uma "estrutura de formatação" refletindo a árvore lógica do documento . Cada elemento desta estrutura gera uma ou mais zonas dotadas de exibição configurável ou propriedades de renderização de voz. A exibição ou leitura ocorre a partir do fluxo de caixas geradas sucessivamente para cada elemento à medida que aparece na ordem linear da estrutura de formatação.
Dependendo do caso, esses diferentes tipos de caixas:
As características aplicáveis às caixas CSS são expressas na forma de pares propriété: valeur.
As propriedades são rotuladas usando palavras de ferramenta em inglês, como " largura ", " tamanho da fonte " ou " volume da voz ".
Os valores podem ser, dependendo do caso, expressos usando unidades padronizadas em outro lugar, ou palavras-chave específicas para CSS. Por exemplo, uma cor de fundo ou de texto pode ser expressa usando o modelo RGB ou as palavras - chave preto, azul, fúcsia , etc.
As propriedades CSS foram estabelecidas com base em um compromisso entre duas restrições opostas: tornar mais fácil para os agentes do usuário lerem folhas de estilo multiplicando propriedades individuais ou torná-las mais fáceis para os autores escreverem usando um número menor de propriedades combinadas. Por exemplo, a posição de uma imagem de fundo é determinada por uma única propriedade ( background-position), combinando os valores de abscissa e ordenada, e não por duas propriedades separadas. Da mesma forma, existem propriedades encurtadas que permitem aos autores simplificar a escrita de uma série de propriedades: o atalho fontpermite, por exemplo, resumir em uma única regra todas as propriedades de fonte, tamanho, altura da linha, caixa, peso e itálico. No entanto, o uso do caractere "/" torna a análise das folhas de estilo pelos agentes do usuário muito mais complexa.
Seletores e blocos de regrasAs propriedades são agrupadas por blocos de regras, delimitados por chaves {}. Cada bloco é precedido por um seletor que designa os elementos estruturais aos quais as propriedades em questão devem ser aplicadas:
/*Je suis un commentaire qui commente le code et qui ne fait rien*/ body { /*Couleur de fond : */ background-color: green; } p { /*Couleur du texte : */ color: red; /*Taille du texte en px (pixel) : */ font-size: 20px; } button { /*Contour : */ outline: none; /*Bordure*/ border: none; /*Couleur de fond : */ background-color: black; /*Couleur de texte : */ color: white; } /*Hover veut dire au survol d'un bouton*/ button:hover { /*Couleur de fond : */ background-color: green; } /*Selection veut dire à la selection du texte*/ *::selection { /*Couleur de fond : */ background-color: black; /*Couleur du texte : */ color: white; } CSSOOCSS orientado a objetos (em inglês OOCSS ), é um método criado em 2009 no modelo de programação orientada a objetos , permitindo que seus estilos sejam reutilizados em diversos contextos.
BEMBEM (Bloco, elemento, modificador) é uma técnica de escrita CSS inventada em 2010, que consiste em declarar estilos na forma de uma estrutura de árvore para melhorar o desempenho. Exemplo:
.product { &-productLabel { ... } &-productPicture { ... } }NB: o E comercial (&) representa o objeto pai em Sass e LESS .
Conteúdo do arquivo index.html :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <link rel="stylesheet" href="style.css"/> <title>Exemple html et css</title> </head> <body> <button class="btn" id="btn1">Premier bouton</button><br/><br/> <button class="btn" id="btn2">Deuxième bouton</button><br/><br/> <button class="btn" id="btn3">Troisième bouton</button> </body> </html>Conteúdo do arquivo style.css :
.btn { height: 50px; color: white; font-size: 20px; cursor: pointer; transition: background-color 2s; outline: none; border: none; } *::selection { background-color: lightgreen; color: darkblue; } .btn:hover { transition: background-color 2s; } #btn1 { background-color: lightgreen; } #btn1:hover { background-color: darkgreen; } #btn2 { background-color: lightblue; } #btn2:hover { background-color: darkblue; } #btn3 { background-color: red; } #btn3:hover { background-color: orange; }Abrir o arquivo HTML em um navegador mostra os estilos configurados com o arquivo CSS.
CSS inicialmente aspirava ser independente entre a estrutura e a apresentação de um documento.
Assim, o site CSS Zen Garden , criado em 2003 por Dave Shea (en) , pretende demonstrar a possibilidade de modificar livremente a renderização apresentada da mesma página web, apenas graças ao CSS e sem qualquer modificação do seu código. HTML: em dezembro de 2006, apresentou 986 designs diferentes para sua página inicial. Porém, a maior parte desses designs se baseiam total ou parcialmente na substituição do conteúdo textual da página por imagens CSS que o reproduzem enriquecendo sua aparência: a liberdade gráfica sempre se baseia parcialmente na transformação do texto em imagens. Por outro lado, CSS Zen Garden permanece um exercício de estilo limitado a um único documento, com uma estrutura acoplada a elementos e atributos semanticamente neutros, que servem apenas para suportar seletores CSS.
Embora existam muitos exemplos de documentos HTML para os quais várias folhas de estilo foram desenvolvidas, existem apenas alguns exemplos de folhas de estilo genéricas que são independentes da estrutura do documento. Estilos de agente de usuário padrão são um exemplo disso, mas limitados a efeitos tipográficos simples sem definição de layout. Em geral, as folhas de estilo dependem muito da estrutura do documento a ser estilizado e são difíceis de reutilizar em documentos estruturados de forma diferente. É mais através da criação de padrões HTML CSS que essa potencial independência de estilos em relação à estrutura específica dos documentos é explorada.
De forma geral :
CSS promove a acessibilidade de uma página da web, em última análise, dando ao usuário o controle sobre a renderização de um documento em seu navegador: é possível adaptá-lo às restrições ou preferências relativas, por exemplo, ao tamanho de exibição de caracteres ou cores. Ao separar a estrutura da apresentação, o CSS também promove a escrita de documentos estruturados semânticos, potencialmente mais utilizáveis por meios técnicos: a liberdade de apresentação dos elementos do título permite, por exemplo, respeitar estritamente a ordem hierárquica formal destes., Que por sua vez, permite que os recursos técnicos estabeleçam um índice navegável. Por fim, ao dar aos autores meios para enriquecer a formatação do texto, o CSS permite limitar o uso de textos transformados em imagens.
No entanto, alguns usos de CSS também podem comprometer a acessibilidade do conteúdo:
Os métodos de aplicação de directivas de acessibilidade de conteúdo web ( RGAA , Uwem por exemplo), portanto, definir regras para o uso de estilos CSS.
CSS responde a um desejo de ter um formato de apresentação simples, tanto em sua funcionalidade quanto em sua sintaxe, de forma a promover a manipulação direta por autores e usuários. No entanto, essa simplicidade é questionada por vários fatores:
Os frameworks CSS são bibliotecas pré-preparadas destinadas a permitir um estilo mais fácil e mais compatível com os padrões de páginas da web usando a linguagem de folhas de estilo em cascata. Eles incluem Blueprint , Bootstrap , Cascade Framework e Foundation . Como a linguagem de programação e as bibliotecas de script, os frameworks CSS são geralmente incorporados como planilhas .css externas referenciadas em HTML "<head>". Eles fornecem uma série de opções prontas para web design e layout. Embora muitos desses frameworks tenham sido lançados, alguns autores os usam principalmente para prototipagem rápida ou para aprendizagem e preferem CSS "artesanal", que é apropriado para cada site publicado sem os custos de design, manutenção e download associados. . no estilo do site.
À medida que aumenta o tamanho dos recursos CSS usados em um projeto, uma equipe de desenvolvimento frequentemente tem que decidir sobre uma metodologia de design comum para mantê-los organizados. Os objetivos são facilidade de desenvolvimento, facilidade de colaboração durante o desenvolvimento e desempenho de folhas de estilo implantadas no navegador. Metodologias populares incluem OOCSS (CSS Orientado a Objetos), ACSS (CSS Atômico), oCSS (Folha de Estilo em Cascata Orgânica), SMACSS (Arquitetura Escalável e Modular para CSS) e BEM (Bloco, Elemento, Modificador).