Tag: css

  • 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

    @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

    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

    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

    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

    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…