Tag: css
-
Modelo de cascata CSS
O significado da palavra CSS é Cascading Stylesheets (Folhas de Estilo em Cascata). O modelo de cascata CSS é o algoritmo para resolver os conflitos em várias regras CSS que são aplicadas num elemento HTML. Para entender o modelo cascata CSS devemos analizar o seguinte exemplo: No código acima aplicam duas regras ao mesmo elemento…
-
Otimizando performance do site com background image-set()
Neste artigo vamos falar sobre uma notação para propriedades muito poderosas do CSS, a image-set() ela foi introduzida já a um bom tempo, mas os navegadores nunca deram um suporte apropriado. A sua funcionalidade é basicamente criar lista de imagens para o navegador decidir qual é o formato apropriado para carregamento.
-
CSS Nesting nativamente nos browsers
CSS Nesting é um dos recursos que muita gente esperava o suporte nativo dos browsers. E agora dois browsers já estão prontos para disponibilizar o suporte. E nesse post você irá aprender tudo sobre CSS nesting.
-
@property CSS: variáveis com super poderes
Umas das novidades mais esperadas no CSS é a atualização da API de propriedades com o @property CSS. Ela vem para dar um significado semântico as propriedades CSS, além de definir valores iniciais e alternativos para variáveis.
-
CSS Aspect-ratio: Mantendo as proporções das imagens
Nesse artigo vamos abordar a propriedade CSS aspect-ratio. Ela pode ser importante e nem muita gente sabe da sua existência. Muito comum acessar alguns sites e redimensionar as janelas e ver as imagens se distorcendo ou perdendo a proporção. Isso acontece por que as imagens não preservam a sua proporção, assim começam a ficar achatadas.
-
Trabalhando com a propriedade CSS currentColor
Nesse post falaremos sobre CSS currentColor, ele já está aí a um bom tempo e ela pode ser bem útil para melhorar o nosso código CSS e nesse tutorial veremos como. Muitas vezes queremos efetuar uma referência a cor atual do nosso elemento, algo como a palavra-chave this, comum nas linguagens de programação. No CSS…
-
Media queries para Progressive Web Apps
Se você me segue no Twitter já viu que estou criando uma série sobre Progressive Web Apps, neste mini curso estou abordando os principais recursos na construção de um PWA. Para esse post vamos falar sobre um conteúdo complementar como adicionar um estilo específico através media queries para identificar uma PWA. O que é uma…
-
Criando o seu próprio bloco Gutenberg: Parte 2
No post anterior vimos como trabalhar com blocos customizados, conceitos básicos de como registrar o nosso bloco Gutenberg como um plugin e criar um markup básico com JavaScript. Nesse post vamos evoluir o nosso bloco todo código está disponível no Github. Primeiro passo vamos ver como os blocos trabalham com estilo externo. Carregando estilo externo…
-
Observe a orientação do device com JavaScript
Com JavaScript podemos observar a orientação do device, também é possível realizar este tratamento com CSS, mas isso fica restrito a questões visuais, caso queria realizar algum tratamento lógico na nossa aplicação podemos utilizar JavaScript. Como acompanhar a orientação do device com javascript? Temos “N” possibilidades de acompanhar a orientação do device com JavaScript, nesse…
-
Padrões de escrita de CSS
Uma das dicas do Claudio Sanches em sua palestra, foi sobre o HandBook do WordPress documentação gerada pela equipe do Core do WordPress, nela contém dicas sobre codificação de CSS, HTML, JavaScript e PHP. Fiquei muito interessado no assunto e neste post vou traduzir os principais pontos do Handbook sobre CSS. Lembrando que esses padrões…
