Unixtopia

main/ artigos/

Cascading Style Sheets

É uma linguagem de computador para estilizar documentos, definir sua aparência visual, usada principalmente na web para dar aos sites, documentos HTML, sua aparência. A linguagem é padronizada pelo W3C, o consórcio estabelecido para fazer tais padrões. CSS não é uma linguagem de programação, é uma linguagem que define atributos de apresentação visual, é uma das três principais linguagens em que um site é escrito, HTML, para escrever o documento, CSS, para dar ao documento uma aparência específica, e JavaScript para scripts do site. Em 2024, a especificação CSS mais recente é a versão 2.1 de 2016, a versão 3 está sendo trabalhada.

Um site não precisa ter um estilo CSS, sem ele terá a aparência padrão simples, que é boa o suficiente para comunicar qualquer informação, mas não impressionará normies, embora apenas baby boomers e minimalistas hardcore hoje em dia tenham sites sem nenhum CSS, e nós os aplaudimos por tal minimalismo. Da mesma forma, um único site HTML pode usar vários estilos ou permitir alternar entre eles, isso se deve ao fato de que o estilo é completamente separado do documento subjacente, você pode, em teoria, pegar o estilo de qualquer documento e aplicá-lo a qualquer outro documento) E graças às regras de substituição que dizem qual estilo terá precedência sobre qual (com base em qual é mais específico etc, usar várias folhas de estilo ao mesmo tempo cria as "cascatas" às quais o nome se refere. Em teoria, um navegador da web pode até permitir que o usuário aplique seu próprio estilo CSS a um determinado site (por exemplo, um cara meio cego pode aplicar um estilo com fonte grande, alguém lendo no escuro aplicará o estilo "modo escuro" e assim por diante), embora por algum motivo os navegadores não façam isso (bem, parece que a intenção original de poder fazer coisas boas como essa foi retrabalhada por capitalistas que veem o CSS mais como uma ferramenta para aplicar mais estilo de marketing e, claro, um capitalista não vai querer que o usuário mude a aparência do seu site porque ele pode, por exemplo, ocultar anúncios ou botões piscantes irritantes pelos quais o capitalista pagou muito.

Na época da web dos baby boomers, basicamente antes do glorioso ano 2000, não havia CSS. Bem, ele existia, mas o suporte era ruim e ninguém o usava. As pessoas se importavam mais em compartilhar informações do que promover gráficos. As pessoas precisavam controlar a aparência de seus sites até certo ponto, por exemplo, em uma galeria de imagens é bom ter tamanhos de miniatura iguais, então o próprio HTML incluiu algumas coisas simples para manipular a aparência, a propriedade width na tag img) Pessoas também fizeram hacks como violar tabelas ou enviar spam para as tags
ou usar arte ASCII para forçar de alguma forma a exibição de algo como queriam. Conforme corporações começaram a invadir a web, elas naturalmente queriam mais consumismo, luzes piscantes e marketing. Elas queriam redefinir a web de coleção de documentos interligados ou um banco de dados global para algo mais como "espaço de outdoor virtual ou talvez "centro comercial eletrônico gigante, o que de fato fizeram. Então, elas apoiaram mais trabalho em CSS, mais navegadores começaram a suportá-lo e normies com blogs também pularam no trem, então CSS se tornou padrão. Por um lado, CSS permite coisas boas: você pode remodelar todo o seu site com uma única mudança de linha, mas ainda assim fica pesado, então tome cuidado, use-o com sabedoria, ou melhor, não o use, você nunca pode errar com isso.

Correto, atitude aprovada pelo SMR em relação a esse pedaço de bloat: como minimalista, você deve evitar CSS como o diabo e nunca usá-lo? As recomendações usuais do SMR se aplicam, mas, só por precaução, vamos reiterar. Use seu cérebro, maximize o bem, minimize o dano, apenas faça com que ninguém possa dizer "ah, não, queria que este site não tivesse CSS". Você Pode usar CSS em seu site, mas ele não deve se tornar um fardo, apenas algo opcional que tornará a vida melhor para aqueles que usam um navegador que suporta CSS, seu site não deve confiar em CSS, CSS não deve ser sua dependência, o site tem que funcionar perfeitamente bem sem ele, lembre-se de que muitos navegadores, especialmente minimalistas que não estão sob o controle de nenhuma corporação, nem mesmo suportam CSS, o site não deve ser prejudicado sem um estilo, primeiro projete seu site sem CSS e adicione CSS apenas como uma melhoria opcional. Não faça seu HTML se curvar ao CSS, não deixe o CSS fazer você adicionar toneladas de divs e classes, faça o HTML primeiro e depois faça o CSS se curvar ao HTML. CSS leve é melhor do que pesado. Se você tem uma única página, incorpore CSS diretamente nela, KISS, o site é autocontido e o navegador não precisa baixar arquivos extras para o seu site, e torne-o curto para economizar largura de banda ao baixar seu site. Não use recursos CSS pesados como animação, desfoques, transições de cores ou reposicionamento selvagem, economize a CPU, salve o planeta.

Você pode obter alguma formatação básica completamente sem CSS mesmo sem o atributo style para algumas coisas você pode usar os antigos atributos visuais do HTML. Se é melhor fazer dessa forma ou usar CSS depende da situação, mas é bom ter uma escolha, isso pode permitir que você evite completamente o CSS para chegar ao clube de sites "nocss", e talvez tenha mais chances de oferecer suporte a navegadores antigos. Embora alguns dos atributos já estejam obsoletos no HTML5, os navegadores ainda os suportam e o pior que pode acontecer é que eles simplesmente não funcionem. Também é possível usar CSS e atributos HTML como fallback. Os atributos visuais incluem bgcolor, border, color, cols, height, rows, shape, size, width etc. Você também pode usar tabelas para dar um layout à página, era assim que costumava ser feito antigamente. E você pode usar imagens para visuais também, mas isso já pode ser uma solução inferior e bloated.

Como funciona

O estilo CSS pode ser colocado em três lugares:

O estilo em si é bem simples, é apenas uma lista de regras de estilo, cada uma no formato:

selectors
{
  style
}

Aqui, os seletores dizem a quais elementos a regra se aplica e o estilo define os atributos visuais que queremos definir:

p
{
  color: red;
  font-size: 15px;
}

h1, h2, h3
{
  color: blue;
}

Embora possa ficar mais complexo, especialmente quando você começa a posicionar e alinhar coisas, demora um tempo para aprender como isso realmente funciona, mas no final não é nenhuma ciência espacial.

CSS Gore e irritando as pessoas

Um usuário executando um bloatbrowser que implementa CSS e o tem ativado por padrão está abertamente convidando você a manipular remotamente o que seu computador está mostrando a ele, então vamos aproveitar esta oportunidade para fazer um pouco de trollagem leve: