Como detectar touch com CSS puro

Como identificar touch com CSS puro é uma questão antiga no mundo webdev. Leia este artigo e saiba mais sobre como Interaction Media Features podem ajudar.

Planejamento com imagens responsivas

Aprenda a fazer um planejamento com imagens responsivas através de técnicas como CSS Grid, direção de arte e resolution switching.

Vari√°veis CSS s√£o melhores que loops de Sass?

Vari√°veis CSS s√£o melhores que loops de Sass? N√£o necessariamente, mas veja este exemplo pr√°tico com as 2 tecnologias para atingir o mesmo objetivo em CSS.

Jumps: o novo steps() em Web Animation

Conhe√ßa “jumps”, os novos valores de CSS steps() para controle de anima√ß√£o web que v√£o facilitar anima√ß√Ķes e fazer c√°lculos mais complexos automaticamente.

Combinação de seletores CSS

Saber fazer combina√ß√£o de seletores CSS √© importante para se formar uma regra CSS eficaz. Veja maneiras de se fazer combina√ß√Ķes de seletores e n√£o erre mais!

Vari√°veis CSS: um guia pr√°tico

Guia pr√°tico sobre vari√°veis CSS, mostrando suas principais vantagens, exemplos, formas de uso, macetes e intera√ß√Ķes com outras tecnologias.

Hifenização de CSS (CSS hyphenation) em 2019

Saiba como está o suporte à hifenização de CSS (CSS hyphenation) nos principais browsers em 2019 e como é possível ter controle sobre hifens em textos.

Como encontrar CSS morto e otimizar estilos

Conheça uma técnica simples e de baixíssimo custo para identificar CSS morto e otimizar o código e performance de projetos web. Você vai se surpreender!

Diquinhas marotas de CSS Grid (parte 2)

Último artigo da série com dicas e macetes (muitas vezes) não tão óbvios sobre CSS Grid para aprimorar as habilidades em layouts para web.

hack flex-grow 9999: o hack de Flexbox que você precisa conhecer

Flexbox guarda muitas surpresas. Conheça o hack flex-grow 9999 e pergunte-se como você conseguiu trabalhar com Flexbox por tanto tempo sem saber disso!

O poder de flex-grow em Flexbox

Conheça uma maneira de usar flex-grow, uma das propriedades de Flexbox, para a solução de um problema comum de front-end.

CSS Blocks: introdução à API

Veja neste artigo uma introdução à API de CSS Blocks e comece a entender porque este é um dos melhores compiladores CSS da atualidade.

LinkedIn anuncia CSS Blocks, o novo otimizador de CSS

Saiba mais sobre CSS Blocks, o novo projeto open source da LinkedIn de um otimizador CSS que promete contribuir muito para o desenvolvimento front-end.

Diquinhas marotas de CSS Grid (parte 1)

Conheça dicas e macetes (muitas vezes) não tão óbvios sobre CSS Grid e aprimore suas habilidades no melhor que o front-end tem a oferecer para layouts.

A maneira 100% correta de fazer breakpoints em CSS

Depois de anos usando breakpoints, ser√° que a maioria dos desenvolvedores front-end realmente j√° pararam para pensar se est√£o fazendo do jeito certo?

Curso “Flexbox: o guia completo”

Aprenda Flexbox e domine uma das melhores tecnologias CSS para criação de layouts modernos e elementos de UI responsivos!

Porque CSS Grid é melhor que Bootstrap para criar layouts

Com o advento de CSS Grid, o framework front-end Bootstrap pode n√£o ser mais t√£o necess√°rio… Saiba mais sobre os poderes de CSS Grid para layouts.

Responsive Components: uma solução para container queries

Conheça Responsive Components, uma solução para componentes responsivos que resolve o problema de Container Queries e pode ser usada imediatamente!

Minicurso gr√°tis “Sass placeholders: o jeito certo”

Saiba mais sobre o minicurso gr√°tis para aprender a usar placeholder selectors do jeito certo e construir uma biblioteca de utilit√°rios CSS.

Curso “CSS Grid: o sistema definitivo de layouts”

Aprenda CSS Grid Layout e desenvolva layouts de maneira surpreendente!

16 dicas de Sass para facilitar sua vida (parte 1)

Conheça dicas Sass que podem mudar sua maneira de usar o melhor pré-processador CSS da atualidade

Curso “CSS: um passo adiante”

Eleve seu CSS ao próximo nível com CSSOO, SMACSS, BEM, Pré-processadores CSS, Namespaces CSS e Task Runners!

Motion UI: 4 formas de usar animação funcional

Interfaces animadas/Motion UI são ponto imprescindível para UX. Conheça 4 formas de usar animação funcional em projetos web.

Você não precisa de um framework CSS Grid

Com o advento de CSS Grid Layout, n√£o demorou muito para surgirem frameworks de Grid. Mas h√° considera√ß√Ķes importantes a serem feitas.

Imagem de largura total em layout com limite de largura

Conheça a solução mais simples e eficiente para ter imagem de largura total em layout com largura limitada.

CSS @supports: detecção nativa de suporte a propriedades CSS

Saiba mais sobre CSS @supports, diretiva CSS que permite detectar o suporte de navegador para propriedade de estilo. Ideal para progressive enhancement.

Desmistificando o CSS cr√≠tico “acima da borda”

Usar CSS cr√≠tico inline “acima da borda” √© uma t√©cnica infal√≠vel? Leia mais para saber que a melhor resposta para dilemas web continua sendo “depende”.

Unidades de viewport: controle de tipografia em web design responsivo

Saiba como ter controle absoluto de tipografia em web design responsivo através de unidades de viewport.

UX em validação de formulários com HTML e CSS

Conheça técnicas simples de HTML e CSS que podem incrementar (e muito!) a UX em validação de formulários.

Livro “CSS Eficiente”

O livro “CSS Eficiente” traz conceitos imprescind√≠veis ao dia-a-dia e apresenta t√©cnicas para construir uma Arquitetura CSS profissional.

Imagens responsivas com srcset e sizes

Conheça mais sobre srcset e sizes, seus novos amigos na hora de implementar imagens responsivas

Flexbox

Use Flexbox para levar a cria√ß√£o de layouts CSS ao pr√≥ximo n√≠vel: saiba mais sobre Flexbox atrav√©s de explica√ß√Ķes detalhadas e exemplos de c√≥digo.

Unidades de CSS moderno: rem, vh, vw, vmin, vmax, ex, ch

Conheças as unidades de CSS moderno (rem, vh, vw, vmin, vmax, ex, ch) e saiba como e quando aplicá-las no CSS ao criar sites.

Pré-processadores CSS e Chrome DevTools

Aprenda como usar o potencial máximo da DevTools ao trabalhar com pré-processadores CSS.

UIkit: framework front-end modular responsivo

UIkit √© um framework responsivo modular de front-end projetado para ser leve e simples de se usar. Veja mais informa√ß√Ķes e conhe√ßa seus componentes.

Webshims Lib: Polyfills de recursos de HTML5 e CSS3

Conheça a Webshims Lib e saiba como ter polyfills de recursos de HTML5 e CSS3 carregados sob demanda!

Filtros CSS3

Saiba como é possível usar os incríveis filtros CSS3 para efeitos como blur, greyscale, brilho, matiz, saturação e mais. Conheça o poder dos novos filtros CSS3!

Como melhorar a performance do site limpando HTML, CSS e imagens

Aprenda como melhorar a performance e tempo de carregamento do site limpando HTML, CSS e imagens e fazendo um bom planejamento de recursos.

Escrevendo CSS eficiente

Escrever CSS performático e de qualidade é algo que nem todos desenvolvedores front-end sabem fazer. Se você se encaixa neste grupo, leia o artigo!

Usando Modernizr para detectar features de HTML5 e CSS3

Conhe√ßa e aprenda a usar Modernizr, biblioteca JavaScript que permite detectar features de HTML5 e CSS3 do navegador e prover solu√ß√Ķes, caso necess√°rio.

N√£o use IDs como seletores CSS

À primeira vista, pode parecer estranho não usar IDs como seletores em CSS, mas, através argumentos bem embasados, entenda porque isso é verdade.

URLs longas apresentadas corretamente com CSS

Apresentar corretamente URLs e outros textos longos é essencial para um layout consistente e de qualidade. Saiba como fazer isso lendo este artigo!

Diferenças entre IDs e Classes

Aprenda a diferença entre IDs e classes, usados em XHTML, CSS e javascript. Saber a diferença entre classes e IDs evita erros básicos e permite desenvolver sites melhores

CSS float: considerações, dicas e macetes para bons layouts na web

Aprenda sobre CSS float e veja dicas e macetes para fazer bons layouts para a web usando tableless