Unixtopia

Cascading Style Sheets

É uma linguagem 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:

• Arquivo separado: aqui o estilo é escrito em seu próprio arquivo com extensão .css e qualquer arquivo HTML que queira usar o estilo vincula-se a este arquivo. Isso é bom se você tiver vários arquivos HTML, como um site que usam o mesmo estilo.
• Dentro do próprio arquivo HTML: o estilo é escrito dentro do mesmo arquivo que o documento HTML, entre as tags de estilo no head, então é tudo autocontido. Isso é bom se o estilo for usado apenas por este documento HTML, como ter uma única página da web ou alguma página especial que tem seu próprio estilo.
• Dentro das tags HTML: o estilo também pode ser especificado como atributos de tag HTML, mas isso é desencorajado, pois mistura HTML e CSS.

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.

Gore de CSS e como irritar 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:

• Cursor: alterar ou até mesmo ocultar o cursor do mouse, você pode defini-lo como none, progress, para fazer o usuário pensar que algo está carregando indefinidamente e ver quanto tempo leva para ele perceber, wait, col-resize ou até mesmo uma imagem específica com url
• Fazer o site funcionar apenas sem CSS: body * { display: none; }body:before { content: "este site só funciona sem CSS." }
.
• CSS pode fazer animação. Isso pode ser usado para induzir convulsões. @keyframes lul { 0% { background-color: red; } 100% { background-color: green; } }body { animation-name: lul; animation-duration: 0.1s; animation-iteration-count: infinite; }.
• Anime o tamanho do <body> para que as barras de rolagem continuem sendo redimensionadas.
• a:hover { display: none; }: faz links desaparecerem quando são apontados com o cursor. Também pode ser usado para botões.
• Faça um grande clusterfuck de divs que são organizados de alguma forma intrincada, então faça cada div mudar seu tamanho com :hover, ou melhor ainda, use transform para girar ou inclinar, acionando um efeito dominó espetacular. Você tem que fazer isso de forma que se uma div remodelar ao passar o mouse, outra fique sob o cursor, acionando a remodelação daquela, que empurra outra sob o cursor.
• Alternativa à anterior: Faça uma div enorme cobrindo a tela inteira e faça-a redimensionar para 1x1 pixels em :hover, isso causará um piscar de olhos indutor de vômito sempre que o mouse for movido.
• Use animação para alterar o site muito lentamente, continue tornando o texto cada vez mais transparente, para que não seja notado imediatamente, mas se torne aparente depois de abrir o site por 15 minutos, ou talvez deixe o site normal, mas depois de 10 minutos gire-o imediatamente 180 graus, ou talvez em vez disso, depois de 10 minutos, substitua o site por alguma imagem pornográfica, há uma chance de alguém abrir o site, depois deixar o computador por um tempo, deixando o site inocente aberto, mas enquanto isso ele mudará para pornô e de repente ele parecerá um pervertido.

Impulsionado por nada. Todo conteúdo é disponível sob CC0 1.0 domínio público. Envie comentários e correções para Mr. Unix em victor_hermian@disroot.org.