Aguarde...

23 de abril de 2020

Estendendo os limites do CSS

Estendendo os limites do CSS

As folhas de estilos em cascata – mais conhecidas como CSS – continuam sendo a base do desenvolvimento da web. Na pesquisa de desenvolvedores de Stack Overflow de 2019 , o CSS é agrupado em conjunto com linguagens como JavaScript, PHP, TypeScript e até SQL, além de estruturas como Angular, jQuery, Node.js e React, para formar um ecossistema típico de desenvolvimento da Web .

O Stack Overflow descobriu que o CSS é a segunda linguagem mais popular entre os desenvolvedores, além do HTML, e também é uma das linguagens mais populares e das tecnologias mais bem pagas em todo o mundo.

“CSS é uma linguagem da web, na medida em que é a ferramenta do desenvolvedor da web para criar visuais dinâmicos na web”, diz Chen Hui Jing , advogado de desenvolvimento da Nexmo e palestrante da Mozilla Tech. “Da mesma forma que os pintores usam pincéis e tintas, e os designers digitais usam o Photoshop, os desenvolvedores da web usam CSS. Mais do que isso, o CSS nos permite criar layouts e visuais dinâmicos que podem se adaptar aos diferentes meios pelos quais nossas criações podem ser visualizadas. ”

Tim Carry , ex-advogado de desenvolvimento da Algolia, considera o CSS uma linguagem de resultados. “Por ser uma linguagem de estilo, você pode ver o resultado do que está codificando no momento em que está codificando” , diz ele. “Pode ser uma linguagem estranha, porque você não tem condições, loops ou funções, mas essas restrições fazem você pensar de maneira diferente.”

O CSS foi proposto pela primeira vez pelo pioneiro norueguês da web Håkon Wium Lie em 1994 como uma linguagem de folha de estilos para a web, com o World Wide Web Consortium publicando o primeiro padrão para ele dois anos depois. Embora a linguagem tenha começado há mais de 25 anos como uma maneira de estilizar e distribuir páginas na Web, o CSS evoluiu para se tornar um elemento crucial das interfaces do usuário, um meio de melhorar a experiência do usuário, um veículo de acessibilidade e um importante recurso. tecnologia no desenvolvimento front-end. No entanto, os desenvolvedores estão cada vez mais encontrando novas maneiras de estender seus limites, provando que há mais na linguagem do que apenas estilo – ela também é cheia de substância.

Criações inesperadas em CSS

Arte e animação

As experiências visuais de arte e animação fazem dos meios o cenário perfeito para CSS. Veja as criações de Diana Smith: o engenheiro da interface do usuário codificou Francine , uma imagem no estilo de uma pintura a óleo do século 18, inteiramente em HTML e CSS. Como criação de CSS, a obra de arte digital parece diferente, dependendo do navegador em que é visualizada. Outras obras de arte de Smith incluem CSS , Lace , inspirado em retratos barrocos flamengos, e Zigario , projetado no estilo de um anúncio de meados do século XX.

Ana Tudor combina transformações 3D, funções trigonométricas e CSS para gerar formas geométricas animadas . “Você pode pensar que a matemática não tem muito a ver com escrever folhas de estilo, mas você pode realmente fazer coisas incríveis com um pouco de matemática em CSS” , escreveu ela no The Sass Way . “A matemática (principalmente a trigonometria) pode ajudá-lo a modelar o mundo real. Você precisará se quiser fazer algo complicado com as transformações em 3D. ”

Enquanto isso, Julian Garnier fez uma asa-X 3D voadora e um sistema solar 3D (embora com algum JavaScript para controle do usuário) em CSS. O desenvolvedor web front-end Keith Clark foi além, construindo um ambiente 3D com CSS , completo com iluminação e sombras, além de uma experiência de realidade virtual baseada em CSS .

Yuan Chuan combina arte e animação usando CSS. Ele desenvolveu um componente da web personalizado para desenhar padrões com CSS e o usa para criar arte generativa composta de padrões semelhantes a gráficos e animações fascinantes.

Jogos

Comparados à arte e animação, os jogos são mais interativos e imersivos, o que pode ser um desafio para o CSS. Mas alguns desenvolvedores aceitaram esse desafio, construindo jogos feitos apenas com CSS.

Milan “Mino” Cernota desenvolveu dois jogos de ação CSS puros na mesma linha que a série de videogames Super Mario. Da mesma forma, Jamie Coulter desenvolveu um jogo de aventura apenas com CSS , enquanto Alexander Majorov enfatiza as linhas zero do código JavaScript em seus dois jogos sem JS . Stephen Cook criou sua própria versão do icônico jogo de corrida Mario Kart usando 100% CSS – principalmente como “um experimento mental para ver até onde o CSS pode ser empurrado” , disse ele mais tarde .

Enquanto isso, a Una Kravets construiu um jogo da velha e um jogo de carnaval de acertar o alvo usando apenas CSS, e selecionou uma coleção de jogos CSS puros no CodePen . “Realmente adoro hacks inteligentes e forçar os limites do CSS. Muitas pessoas não percebem o quão poderoso é ” , disse ela em um post no blog que detalhava seu processo de desenvolvimento por trás desses jogos . “Há valor em experimentar e forçar limites para realmente entender uma língua.”

Um motor de busca

Com todas as suas intrincadas funcionalidades de back-end, um mecanismo de pesquisa pode ser considerado muito complexo para ser codificado usando apenas CSS, mas Carry fez exatamente isso. O que começou como uma piada no espírito de um tolo de abril se transformou em um protótipo funcional .

Carry tem experimentado o CSS há muito tempo e trabalhou anteriormente na recriação de bandeiras de diferentes países em CSS puro “Ao fazer o projeto das bandeiras, descobri algumas técnicas que reutilizei na construção do mecanismo de pesquisa” , diz ele. “Mas muita automação está envolvida com um mecanismo de pesquisa. Você precisa escrever 10 regras CSS diferentes apenas para exibir um registro específico. ”

Em vez de codificar tudo manualmente, Carry empregou um script Ruby para gerar automaticamente parte do código CSS. “Quando comecei a escrever em Ruby, ele se tornou como qualquer outro projeto. Eu precisava escrever funções e escrever testes para garantir que minhas funções retornassem a coisa correta ” , diz ele.

Esse não foi o único obstáculo que Carry encontrou na construção do mecanismo de pesquisa . A parte mais difícil foi saber o que ele queria fazer, mas mudar no meio do projeto. “Inicialmente, tive a ideia de fazer o mecanismo de pesquisa em CSS puro e queria permanecer fiel a essa ideia o máximo de tempo possível. Mas percebi que seria muito lento, então tive que usar algumas linhas de JavaScript para a parte que estava ouvindo o evento de entrada ” , diz ele.

Enquanto Carry progredia durante o desenvolvimento, ele aprendeu a contornar os limites do CSS. O mecanismo de pesquisa trabalha com um pequeno número de registros, mas Carry alerta que ainda não é algo que deve ser usado na produção.

Uma nova abordagem para escrever CSS

Quem pensaria que você poderia escrever CSS em JavaScript? Max Stoiber , um engenheiro de JavaScript que desenvolveu o Styled Components , uma biblioteca CSS-in-JS.

O Styled Components combina o poder do CSS com literais de modelo marcados em JavaScript, permitindo que os desenvolvedores que trabalham com estruturas JavaScript baseadas em componentes como Angular, React e Vue gravem o código CSS real nos componentes de estilo. Como os estilos agora fazem parte dos componentes, é mais fácil usá-los como construções de estilo de baixo nível.

A Styled Components começou em 2016 como uma colaboração entre Stoiber e o desenvolvedor da web Glen Maddern . “Conversamos sobre CSS-in-JS porque gostamos da ideia, mas não gostamos de escrever CSS como objetos JavaScript”, diz Stoiber. “Por isso, reunimos e prototipamos a primeira versão do que se tornaria o Styled Components, com as duas principais inovações escrevendo CSS como CSS real e criando componentes de estilo por padrão”.

Como uma nova maneira de escrever CSS, o Styled Components oferece as vantagens do escopo local, da renderização no lado do servidor e do uso de condicionais, funções e outras lógicas para regras de estilo. “Componentes com estilo simplificam a atualização dinâmica de CSS a partir do JavaScript e otimizam a API para estilizar aplicativos da Web com base em componentes, em vez de documentos”, diz Stoiber. Outras bibliotecas CSS-in-JS incluem as independentes de estrutura, como Aphrodite e Emotion , e as específicas de estrutura, como Radium for React.

Essa nova construção geralmente é atendida com suporte. Mas, como acontece com todas as coisas novas, os Componentes com estilo foram recebidos com alguma reação. Stoiber diz que existem aqueles que não receberam bem essa nova maneira de fazer coisas que não estão alinhadas com o que os desenvolvedores estão acostumados.

Ultrapassando os limites com CSS

Reconhecer os desafios associados ao CSS é o primeiro passo para ultrapassar os limites da linguagem. Depois de superá-los, você poderá começar a construir coisas que nunca pensou serem possíveis. “O CSS é quase ilimitado”, diz Estelle Weyl , desenvolvedora de consultoria, palestrante e autor. “Acabamos de ficar limitados pelos navegadores herdados e pela falta de suporte a novos recursos. Além disso, existem muitas propriedades e ainda mais valores com melhor suporte a cada versão do navegador. ”

Weyl destaca o próximo :where()contêiner que permite ser específico sem adicionar essa especificidade, selecionando elementos que começam no final da lista com :nth-last-of-type():focus-within and :target-within selectors“Há tanta coisa que o CSS faz que os desenvolvedores desconhecem” , diz ela. “Agora você pode adicionar conteúdo gerado às entradas. Os seletores se tornaram tão poderosos que você pode selecionar qualquer elemento sem ter acesso à marcação HTML. ”

O conselho de Carry é começar com um objeto do mundo real – a interface de um console de jogos ou uma calculadora, por exemplo – e tentar recriá-lo usando apenas CSS. “Uma ótima maneira de ultrapassar os limites de um idioma é criar algo que o idioma não deveria estar fazendo em primeiro lugar” , diz ele.

Explorar novas propriedades e recursos de CSS, mesmo que ainda não tenham sido amplamente implementados ou ainda estejam em versões experimentais de navegadores, é outro meio de estender os limites do CSS. “Aproveite o tempo para brincar. Sou um grande fã do CodePen, tanto por inspiração quanto por ser uma ferramenta para experimentar coisas novas ”, diz Michelle Barker , líder de desenvolvimento front-end da Atomic Smash e autora do blog front-end CSS {In Real Life} . “E se algo não funcionar como você gostaria, você pode contribuir para o processo de padrões levantando um problema, escrevendo sobre suas frustrações ou conversando com implementadores. Faça parte da conversa que molda as novas especificações CSS. ”

Prevendo o futuro do CSS

Ao refletir sobre o rumo da linguagem, Dave Geddes , criador da Mastery Games , uma série de jogos educacionais para ajudar os desenvolvedores a aprender conceitos de CSS através do jogo, fica mais empolgado com o CSS Grid Layout. “Acho que estamos apenas começando a perceber o poder do CSS Grid. É um novo ingrediente na padaria da web ” , diz ele. “Podemos fazer quase tudo com isso, e mal arranhamos a superfície. Eu tenho usado para criar layouts de artigos, peças e revistas. ”

Enquanto isso, Chen está de olho nos trabalhos em andamento sobre personalização e internacionalização. “O CSS está introduzindo mais recursos que levam em conta diferentes modos de escrita, o que significa que há um foco maior na comunidade que não fala inglês – e isso é um bom desenvolvimento” , diz ela. “Também há muito trabalho sendo feito para permitir mais personalização de estilos nos elementos da interface, como barras de rolagem”.

Mas o que muitos desenvolvedores de front-end estão mais ansiosos é trabalhar sua própria mágica através do Houdini , que, nas palavras de Chen, “expõe partes do mecanismo CSS e permite que os desenvolvedores se conectem ao mecanismo de renderização do navegador. Isso abre muitas oportunidades para os desenvolvedores criarem suas próprias propriedades CSS. ” Enquanto isso, Weyl pensa em Houdini como JS-in-CSS: “O Houdini realmente permitirá a extração de fronteiras, pois permite que os desenvolvedores implementem novas propriedades e valores sem ter que esperar que os navegadores suportem totalmente todos os casos extremos”.

No entanto, apesar de toda a promessa que o futuro reserva, encontrar maneiras de ultrapassar os limites e estender os limites do CSS no presente alimenta a criatividade dos desenvolvedores front-end. “As restrições do CSS forçam você a fazer algo criativo com a linguagem”, diz Carry. “Para mim, o CSS é semelhante aos tijolos de Lego – se você tiver um número suficiente e tempo suficiente, poderá criar o que quiser.”

Postado em Blog
Escreva um comentário