# Categoria: CSS

> Todos os 125 posts do dpw na categoria CSS.

URL: https://dpw.dev/categoria/css/

## Posts

- [Guia da propriedade CSS pointer-events](https://dpw.dev/css/pointer-events-css/): Como pointer-events decide qual elemento recebe cliques e hover, por que ela é herdada, e o que ela não faz: desabilitar elemento nem impedir seleção de texto.
- [Como animar border-image em CSS](https://dpw.dev/css/animar-border-image-css/): Como animar border-image com gradientes, custom properties registradas e border-image-slice para criar bordas que se desenham sozinhas no hover.
- [Como usar scroll-driven animations em direções opostas](https://dpw.dev/css/scroll-driven-animations-direcoes-opostas/): Como fazer colunas se moverem em direções opostas durante a rolagem com scroll-driven animations, animation-timeline e a função view() do CSS.
- [Layouts matemáticos com sibling-index() e sibling-count()](https://dpw.dev/css/sibling-index-sibling-count-css/): As funções sibling-index() e sibling-count() levam a contagem de elementos para o CSS: animações escalonadas, larguras e menus radiais sem JavaScript.
- [Como usar e estilizar Dialog](https://dpw.dev/css/usar-estilizar-dialog-html-css/): Como usar e estilizar o elemento dialog: show() e showModal(), invoker commands, acessibilidade, inércia, estilização do ::backdrop, posicionamento e animações.
- [Trabalhando com ::highlight() usando progressive enhancement](https://dpw.dev/css/css-highlight-progressive-enhancement/): Como o pseudo-elemento ::highlight() e a CSS Custom Highlight API destacam trechos de texto, com fallback para quando o JavaScript não está disponível.
- [CSS Gap Decorations](https://dpw.dev/css/css-gap-decorations/): Com suporte total no Chrome e no Edge, as gap decorations do CSS já permitem estilizar os espaços de grid e flexbox com bastante controle.
- [A linha tênue entre estados CSS e eventos JavaScript](https://dpw.dev/css/a-linha-tenue-entre-estados-css-e-eventos-javascript/): Pseudo-classes como :hover, :focus e :checked funcionam quase como listeners de eventos JS. Veja os paralelos com CSS e o futuro event-trigger.
- [A nova propriedade CSS border-shape](https://dpw.dev/css/css-border-shape/): Conheça a propriedade CSS border-shape para criar formas, bordas que seguem o contorno, decorações e animações que clip-path e mask não conseguem.
- [Range Syntax em Media Queries](https://dpw.dev/css/css-range-syntax/): A sintaxe de intervalos (Range Syntax) em media queries é mais legível, fácil de depurar e bem suportada. Saiba por que vale substituir min-width e max-width.
- [7 receitas de View Transitions para experimentar](https://dpw.dev/css/7-receitas-de-view-transitions/): Sete animações prontas para páginas com View Transitions do CSS — pixel dissolve, wipe, rotação, círculo, diagonal, cortina e 3D flip.
- [A grande expansão do CSS](https://dpw.dev/css/a-grande-expansao-do-css/): CSS agora faz nativamente o que Floating UI, GSAP, Framer Motion e react-select exigiam em JavaScript. Veja quanto isso economiza e o que ainda falta.
- [Item Flow: o novo sistema de layout para CSS](https://dpw.dev/css/item-flow-sistema-layout-css/): Conheça o Item Flow, proposta CSS que unifica flex-flow e grid-auto-flow em um sistema só, com masonry integrado. Notas e análise da nova sintaxe.
- [Substituindo funções de cor do Sass por CSS nativo](https://dpw.dev/css/substituindo-funcoes-de-cor-sass-por-css-nativo/): Guia prático para substituir funções de cor do Sass como lighten(), darken() e tint() por CSS moderno com color-mix() e sintaxe de cores relativas.
- [A IA gera CSS, mas você sabe se é bom?](https://dpw.dev/css/ia-gera-css-mas-voce-sabe-se-e-bom/): A IA escreve CSS em segundos, mas gera código desorganizado e insustentável. Descubra por que arquitetura CSS é a habilidade que separa quem usa IA com critério de quem apenas aceita o que ela cospe.
- [Tier List das últimas melhores features de CSS: o que realmente vale a pena usar](https://dpw.dev/css/tier-list-css-novas-features-css-2024/): Tier List: ranking das novas features CSS 2024. Avaliação crítica de :has(), container queries, cascade layers e outras novidades. Descubra as melhores!
- [Layouts com CSS Grid e minmax()](https://dpw.dev/css/layouts-com-css-grid-e-minmax/): Crie layouts responsivos inteligentes com CSS Grid e minmax(). Função poderosa para tracks flexíveis com tamanhos dinâmicos. Domine Grid agora!
- [Estilização de formulários com CSS puro (avançado)](https://dpw.dev/css/estilizar-formulario-css-puro/): Estilize formulários HTML com CSS puro de forma avançada e profissional. Técnicas e seletores pouco conhecidos para forms modernos. Sem JavaScript!
- [10 dicas para melhores animações e transições CSS](https://dpw.dev/css/10-dicas-animacoes-transicoes-css/): Aprenda 10 técnicas essenciais para criar animações e transições CSS fluidas e profissionais. Descubra como melhorar dramaticamente a UX do seu site!
- [CSS Condicional com :has e :nth-last-child](https://dpw.dev/css/css-condicional-has-nth-last-child/): Aprenda CSS condicional com :has e :nth-last-child avançados. Crie layouts dinâmicos baseados no número de elementos sem JavaScript. Técnica poderosa!
- [Como selecionar irmãos anteriores com CSS usando :has()](https://dpw.dev/css/irmao-anterior-css-has/): Seletor de irmão anterior com :has() em CSS puro. Nova pseudo-classe revolucionária para estilos baseados em descendentes e contexto. Use agora!
- [CSS Logical Properties](https://dpw.dev/css/css-logical-properties/): Domine CSS Logical Properties para layouts inclusivos e multilíngues. Crie interfaces que se adaptam automaticamente a diferentes idiomas e preferências.
- [CSS Style Queries](https://dpw.dev/css/style-queries/): Style Queries CSS: consultas baseadas em estilos de componentes. Próxima evolução após Container Queries para componentes ainda mais inteligentes. Futuro!
- [CSS min-content, max-content e fit-content](https://dpw.dev/css/css-min-content-max-content-fit-content/): Entenda min-content, max-content e fit-content em CSS completamente. Guia completo sobre dimensionamento intrínseco para layouts flexíveis e responsivos!
- [Guia de unidades CSS para espaçamento](https://dpw.dev/css/guia-unidades-css-espacamento/): Guia completo de unidades CSS para espaçamento profissional. Domine px, em, rem, vw, vh, % e outras unidades para criar layouts precisos. Aprenda!
- [Como fazer code review de CSS](https://dpw.dev/css/como-fazer-code-review-css/): Guia prático para code review de CSS profissional. 6 critérios essenciais: estilo, cross-browser, especificidade, pré-processadores e performance. Revise!
- [CSS Shorthands: Dica de Ouro](https://dpw.dev/css/css-shorthands-dica-de-ouro/): Cuidado com CSS shorthands! Descubra o perigo oculto das propriedades abreviadas e como usá-las corretamente sem prejudicar código. Dica de ouro!
- [5 dicas para melhorar a performance CSS](https://dpw.dev/css/5-dicas-performance-css/): Otimize o desempenho do seu CSS com 5 técnicas comprovadas. Aprenda minificação, compressão, CSS crítico e remoção de código não utilizado. Acelere!
- [prefers-reduced-data: como funciona a nova media query](https://dpw.dev/css/prefers-reduced-data/): Prefers-reduced-data: economize dados do usuário com CSS. Media query nativa para detectar preferência por menor consumo de dados móveis. Respeite!
- [As novas viewports: Large, Small e Dynamic](https://dpw.dev/css/viewports-large-small-dynamic/): Descubra as novas viewports CSS: Large, Small e Dynamic. Unidades lvh/svh/dvh para resolver problemas com barras móveis flutuantes. Use agora!
- [O novo web design responsivo](https://dpw.dev/css/o-novo-web-design-responsivo/): Descubra o novo web design responsivo: além de breakpoints. Container queries, component-driven e abordagens modernas de RWD. Atualize-se agora!
- [Tailwind CSS: adiciona complexidade; não faz nada](https://dpw.dev/css/tailwind-css/): Tailwind CSS: framework utility-first revolucionário. Domine classes utilitárias, customização avançada e desenvolvimento rápido com Tailwind. Use agora!
- [Dark Mode com variáveis de luminosidade invertida](https://dpw.dev/css/dark-mode-lch/): Técnica avançada de dark mode usando variáveis de luminosidade invertida. Implemente modo escuro com LCH e variáveis CSS de forma inovadora.
- [Como melhorar a legibilidade de textos na Web](https://dpw.dev/css/melhorar-legibilidade-textos-web/): Como melhorar significativamente legibilidade de textos na web. Tipografia adequada, contraste, espaçamento e técnicas para leitura confortável. Melhore!
- [CSS mask-image: mascaramento CSS nativo](https://dpw.dev/css/css-mask-image/): Aprenda CSS mask-image para criar efeitos visuais incríveis e únicos. Tutorial completo de mascaramento nativo com imagens, SVG e gradientes CSS. Domine!
- [Como encontrar o elemento-pai relativo mais próximo](https://dpw.dev/css/como-encontrar-o-elemento-pai-relativo-mais-proximo/): Descubra como encontrar o elemento-pai relativo mais próximo usando offsetParent e DevTools. Resolva problemas complexos de posicionamento CSS. Debugue melhor!
- [O que é possível colocar em uma variável CSS?](https://dpw.dev/css/variaveis-css-valores-possiveis/): Descubra o que é possível colocar em variáveis CSS. Valores aceitos, limitações de custom properties e casos de uso práticos. Aprenda agora!
- [Técnicas CSS para elementos de cobertura](https://dpw.dev/css/elementos-cobertura-css/): Técnicas CSS essenciais para elementos de cobertura (overlay). Aprenda a sobrepor elementos com position, z-index, classes utilitárias e melhores práticas!
- [10 dicas para manter a Especificidade CSS baixa](https://dpw.dev/css/especificidade-css-baixa-dicas/): 10 dicas práticas para manter especificidade CSS baixa. Evite guerra de seletores e facilite manutenção com boas práticas de arquitetura CSS. Aprenda!
- [Navegação âncora e smooth scroll com CSS puro](https://dpw.dev/css/navegacao-ancora-smooth-scroll-css-puro/): Implemente navegação âncora com smooth scroll usando apenas CSS puro. Aprenda scroll-behavior nativo sem JavaScript para rolagem suave perfeita. Veja como!
- [Tira-dúvidas sobre BEM](https://dpw.dev/css/bem-tira-duvidas/): Esclareça suas dúvidas sobre a metodologia CSS BEM. Live completa com explicações práticas, benefícios e aplicação da convenção mais popular do mundo.
- [O conceito mais importante de CSS](https://dpw.dev/css/conceito-mais-importante-css/): Descubra a Cascata, o conceito mais importante do CSS. Entenda especificidade de seletores e ordem de aplicação dos estilos para dominar CSS. Essencial!
- [9 regras básicas de Web Design Responsivo](https://dpw.dev/css/regras-web-design-responsivo/): Aprenda as 9 regras básicas de Web Design Responsivo para criar sites que funcionam perfeitamente em qualquer dispositivo. Guia prático e direto ao ponto.
- [16 dicas de Sass para facilitar sua vida (parte 2)](https://dpw.dev/css/sass-dicas-parte-2/): Domine Sass com 8 dicas avançadas: argumentos variáveis, mixins inteligentes, operações e arquitetura de estilos. Facilite sua vida no front-end!
- [Dark Mode com CSS: o jeito mais fácil](https://dpw.dev/css/dark-mode-css-facil/): Implemente dark mode com CSS de forma simples e eficiente. Técnica prática para adicionar modo escuro responsivo às preferências do usuário.
- [@property: variáveis CSS com superpoderes](https://dpw.dev/css/property-css/): @property CSS: propriedades customizadas tipadas e poderosas. Nova feature revolucionária para custom properties com tipos, valores iniciais e herança. Use!
- [CUBE CSS: uma nova metodologia CSS](https://dpw.dev/css/cube-css/): Conheça CUBE CSS, metodologia que trabalha com o navegador, não contra ele. Simplicidade, pragmatismo e escalabilidade para projetos de qualquer tamanho.
- [BEM: guia definitivo do padrão CSS mais famoso](https://dpw.dev/css/bem/): Guia completo da metodologia BEM (Block Element Modifier). Aprenda a convenção CSS do Yandex com exemplos práticos, vantagens e melhores práticas.
- [Barra de progresso circular com CSS](https://dpw.dev/css/barra-progresso-circular-css/): Crie barras de progresso circular impressionantes com CSS puro e Sass. Técnica diferenciada usando linear-gradient para 100 níveis de preenchimento radial!
- [Como fazer menu dropdown com CSS puro](https://dpw.dev/css/menu-dropdown-css-puro/): Crie menu dropdown com CSS puro sem JavaScript. Técnica acessível usando :hover e :focus para menus suspensos nativos e responsivos. Aprenda!
- [Textos responsivos com CSS clamp()](https://dpw.dev/css/textos-responsivos-com-css-clamp/): Crie textos responsivos com CSS clamp(). Tipografia fluida que escala suavemente entre tamanhos mínimos e máximos sem media queries. Aprenda!
- [Os benefícios de performance de animações CSS](https://dpw.dev/css/animacoes-css-beneficios-performance/): CSS ou JavaScript para animações web? Descubra métricas de performance reais, técnicas de otimização e por que transform supera position absolute. Compare!
- [Melhor forma para listas com caption?](https://dpw.dev/css/listas-com-caption-label/): Listas HTML com caption e label para melhor acessibilidade. Técnicas semânticas avançadas para descrições e legendas em listas. Melhore HTML!
- [Bordas personalizadas responsivas com CSS background-repeat](https://dpw.dev/css/bordas-personalizadas-responsivas-com-css-background-repeat/): Crie bordas personalizadas e responsivas com CSS puro facilmente. Técnica surpreendente usando background-repeat: space e round para efeitos únicos. Incrível!
- [Como fazer menu off canvas da maneira mais fácil](https://dpw.dev/css/menu-off-canvas/): Aprenda a criar menu off-canvas da maneira mais fácil. Navegação lateral responsiva que desliza da lateral para mobile. Técnica e código completo!
- [O básico sobre Media Queries](https://dpw.dev/css/media-queries/): Media queries CSS: guia completo de responsive web design. Breakpoints inteligentes, sintaxe e estratégias práticas para layouts adaptativos. Domine RWD!
- [Animação de loading com CSS puro](https://dpw.dev/css/animacao-loading-css/): Crie animações de loading leves e performáticas com CSS puro facilmente. Elimine gifs pesados e melhore performance sem bibliotecas JavaScript. Otimize!
- [O básico de Sass para se virar nas webs](https://dpw.dev/css/o-basico-de-sass/): Domine o básico de Sass para se virar nas webs. Aprenda variáveis, nesting, mixins e organização para escrever CSS profissional. Comece agora!
- [Introdução a Animações CSS](https://dpw.dev/css/animacoes-css-introducao/): Domine os fundamentos de animações CSS do zero. Aprenda keyframes, propriedades animation-* e easings para criar experiências visuais impactantes. Anime!
- [Cores e variáveis CSS: box-shadow-color?!](https://dpw.dev/css/variaveis-css-box-shadow-color/): Cores e variáveis CSS: box-shadow-color existe de verdade?! Técnicas avançadas para sombras e cores dinâmicas com custom properties CSS. Truque incrível!
- [Slanted shapes (formas diagonais) com CSS](https://dpw.dev/css/slanted-shapes-formas-diagonais/): Slanted Shapes: crie formas diagonais em CSS. Técnicas criativas para backgrounds, seções e layouts com ângulos inclinados impressionantes. Domine!
- [6 vantagens em usar BEM ao escrever CSS](https://dpw.dev/css/6-vantagens-em-usar-bem-ao-escrever-css/): Organize e escale seu CSS com metodologia BEM profissionalmente. Descubra 6 vantagens: nomes de classes compreensíveis, consistentes e fáceis de manter!
- [Source Maps em produção?](https://dpw.dev/css/source-maps-em-producao/): Source maps em produção: devo usar ou não? Analise vantagens de debug facilitado vs riscos reais de exposição de código-fonte. Tome decisão informada agora!
- [O macete para unidades de viewport em mobile](https://dpw.dev/css/o-macete-para-unidades-de-viewport-em-mobile/): Descubra o macete para unidades viewport (vh/vw) em mobile. Solução definitiva para problemas com barras de navegação em iOS e Android. Funciona!
- [Você deve saber isso sobre unidades de viewport](https://dpw.dev/css/voce-deve-saber-isso-sobre-unidades-de-viewport/): Você deve saber isso sobre unidades viewport. Comportamentos inesperados, bugs mobile comuns e soluções práticas para vh, vw. Evite problemas!
- [CSS element()](https://dpw.dev/css/css-element/): Descubra a função CSS element() que renderiza qualquer parte de um site como imagem ao vivo. Crie efeitos avançados com reflexos e dobras 3D.
- [dpw expo #36 - React Bolt, Butter Cake, Browserhacks](https://dpw.dev/css/dpw-expo-36-react-bolt-butter-cake-browserhacks/): Explore React Bolt, Butter Cake e Browserhacks no dpw expo. Componentes React ultra rápidos, CMS headless moderno e hacks de navegadores. Descubra!
- [Vulnerabilidades de segurança CSS](https://dpw.dev/css/vulnerabilidades-de-seguranca-css/): Descubra vulnerabilidades de segurança CSS. Ataques via estilos, exfiltração de dados e técnicas para proteger suas aplicações web. Proteja-se!
- [4 Layouts mais comuns com CSS Grid](https://dpw.dev/css/4-layouts-comuns-css-grid/): Aprenda 4 layouts comuns e essenciais com CSS Grid. Veja exemplos práticos de galerias, grids de artigos e designs bidimensionais responsivos. Domine Grid!
- [9 dicas básicas de web design responsivo](https://dpw.dev/css/9-dicas-basicas-web-design-responsivo/): Domine os fundamentos do design responsivo. Aprenda mobile first, viewports, media queries e crie layouts robustos para todos os dispositivos.
- [CSS Grid intrinsecamente responsiva com minmax() e min()](https://dpw.dev/css/css-grid-intrinsecamente-responsiva-minmax-min/): CSS Grid intrinsecamente responsiva: layouts que se adaptam sozinhos. Domine minmax(), min() e técnicas para grids sem media queries. Revolucionário!
- [dpw expo #31 - Page Transitions, Hopscotch,  Agile CSS Framework](https://dpw.dev/css/dpw-expo-31-page-transitions-hopscotch-agile-css-framework/): Explore Page Transitions, Hopscotch e Agile CSS no dpw expo. Transições suaves entre páginas, tours guiados interativos e framework CSS leve. Teste!
- [dpw expo #30 - collectorium, perfundo, npkill](https://dpw.dev/css/dpw-expo-30-collectorium-perfundo-npkill/): Explore Collectorium, Perfundo e npkill no dpw expo. Biblioteca de padrões UI, lightbox minimalista elegante e limpeza de node_modules pesados!
- [CSS e o Contexto de Formatação de Bloco (Block Formatting Context)](https://dpw.dev/css/css-contexto-de-formatacao-de-bloco-block-formatting-context/): Entenda Block Formatting Context (BFC) em CSS profundamente: como controlar floats, margin collapsing e criar layouts mais previsíveis e eficientes. Domine!
- [dpw expo #28 - simplePARALLAX, Gitfolio, CSS Border Animations](https://dpw.dev/css/dpw-expo-28-simpleparallax-gitfolio-css-border-animations/): Explore simpleParallax, Gitfolio e CSS Border Animations no dpw expo. Parallax ultra fácil, portfólio automático do GitHub e bordas animadas. Teste!
- [hack flex-grow 9999: o hack de Flexbox que você precisa conhecer](https://dpw.dev/css/flexbox-hack-flex-grow-9999/): Hack Flexbox com flex-grow: 9999 para layouts super inteligentes. Técnica avançada para quebra de linha automática sem media queries. Truque incrível!
- [CSS Grid: o jeito certo](https://dpw.dev/css/css-grid-o-jeito-certo/): Aprenda CSS Grid do jeito certo desde o início absoluto. Fundamentos sólidos, conceitos essenciais e práticas corretas para dominar layouts modernos. Comece!
- [dpw expo #24 - Animista, Static Site Boilerplate, Humanize Duration](https://dpw.dev/css/dpw-expo-24-animista-static-site-boilerplate-humanize-duration/): Explore Animista, Static Site Boilerplate e Humanize Duration no dpw expo. Gerador de animações CSS, starter kit moderno e formatação de tempo. Experimente!
- [A mentalidade CSS](https://dpw.dev/css/mentalidade-css/): Desenvolva a mentalidade CSS correta para profissionais. Paradigmas, arquitetura e forma de pensar para escrever CSS escalável e manutenível. Evolua!
- [dpw expo #21 - freezeframe.js, Spotlight.js, Microjs](https://dpw.dev/css/dpw-expo-21-freezeframejs-spotlightjs-microjs/): Explore Freezeframe.js, Spotlight.js e Microjs no dpw expo. Controle inteligente de GIFs, galeria de imagens overlay e catálogo de micro-frameworks. Veja!
- [Como criar templates com CSS Grid](https://dpw.dev/css/css-grid-como-criar-templates/): Crie templates poderosos com CSS Grid facilmente. Guia prático sobre grid-template-areas, linhas nomeadas e layouts profissionais semânticos. Domine Grid!
- [dpw expo #20 - Transfonter, Specificity Calculator, ms](https://dpw.dev/css/dpw-expo-20-transfonter-specificity-calculator-ms/): Explore Transfonter, Specificity Calculator e ms no dpw expo. Conversor de fontes webfont, calculadora de especificidade CSS e parser de tempo. Útil!
- [font-display: controle de exibição de fontes para ajuste em performance](https://dpw.dev/css/font-display-controle-de-exibicao-de-fontes-para-ajuste-em-performance/): Font-display: otimize carregamento de fontes web drasticamente. Controle exibição durante download e melhore performance com swap, fallback e optional. Use!
- [Flexbox: como passar para a próxima linha fácil](https://dpw.dev/css/flexbox-quebrar-proxima-linha-breakline/): Aprenda como quebrar para próxima linha em Flexbox. Técnicas e truques práticos para controlar wrapping e quebras de elementos flex. Domine!
- [Como detectar touch com CSS puro](https://dpw.dev/css/como-detectar-touch-com-css-puro/): Aprenda a detectar dispositivos touch com CSS puro usando Interaction Media Features. Hover e pointer para suporte a diferentes tipos de entrada. Detecte!
- [Planejamento com imagens responsivas](https://dpw.dev/css/imagens-responsivas-planejamento/): Planejamento de imagens responsivas: estratégias completas e boas práticas. Otimize performance, UX e carregamento ideal para diferentes dispositivos. Planeje!
- [Variáveis CSS são melhores que loops de Sass?](https://dpw.dev/css/variaveis-css-loops-sass/): Variáveis CSS são melhores que loops de Sass? Compare custom properties com preprocessadores para geração dinâmica de estilos. Veja exemplos!
- [Jumps: o novo steps() em Web Animation](https://dpw.dev/css/jumps-steps-css-web-animation/): Domine steps e jumps em animações CSS para efeitos únicos. Crie animações frame-by-frame incríveis e efeitos escalonados com timing functions discretas. Anime!
- [Combinação de seletores CSS](https://dpw.dev/css/combinacao-seletores-css/): Domine combinações de seletores CSS para regras mais eficazes. Aprenda descendentes, filhos diretos, irmãos adjacentes e seletores compostos.
- [Variáveis CSS: um guia prático](https://dpw.dev/css/variaveis-css-guia-pratico/): Variáveis CSS: guia prático completo para iniciantes. Custom properties, escopo, fallbacks e cases de uso para CSS moderno e manutenível. Domine agora!
- [Hifenização de CSS (CSS hyphenation) em 2019](https://dpw.dev/css/hifenizacao-hyphenation-css-2019/): Hifenização (hyphenation) em CSS para textos justificados e responsivos. Use hyphens para quebras de linha naturais e legibilidade aprimorada. Melhore textos!
- [Como encontrar CSS morto e otimizar estilos](https://dpw.dev/css/css-morto-otimizar-estilos/): Técnica simples para identificar e remover CSS morto em produção. Descubra como otimizar estilos e melhorar performance eliminando código legado. Limpe!
- [Diquinhas marotas de CSS Grid (parte 2)](https://dpw.dev/css/css-grid-dicas-parte-2/): Continue dominando CSS Grid com dicas avançadas - Parte 2. Mais técnicas profissionais, casos de uso reais e otimizações para layouts perfeitos. Domine Grid!
- [O poder de flex-grow em Flexbox](https://dpw.dev/css/flex-grow-flexbox-poder/): Descubra o verdadeiro poder de flex-grow em Flexbox CSS. Entenda distribuição inteligente de espaço e controle preciso de crescimento de elementos. Domine!
- [CSS Blocks: introdução à API](https://dpw.dev/css/css-blocks-api-introducao/): Conheça CSS Blocks da LinkedIn: otimizador revolucionário que reescreve CSS para máxima performance. Introdução à API e casos de uso práticos. Otimize!
- [LinkedIn anuncia CSS Blocks, o novo otimizador de CSS](https://dpw.dev/css/css-blocks-linkedin-otimizador-css/): Descubra CSS Blocks da LinkedIn: tecnologia que otimiza automaticamente seu CSS. Aprenda como reduzir drasticamente o tamanho dos arquivos CSS. Revolucionário!
- [Diquinhas marotas de CSS Grid (parte 1)](https://dpw.dev/css/css-grid-dicas-parte-1/): Domine CSS Grid com dicas essenciais - Parte 1 da série. Aprenda técnicas avançadas, truques profissionais e melhores práticas para layouts modernos. Comece!
- [A maneira 100% correta de fazer breakpoints em CSS](https://dpw.dev/css/css-breakpoints-maneira-correta/): Descubra a abordagem correta para breakpoints CSS responsivos. Aprenda a definir pontos de quebra baseados em conteúdo, não em dispositivos.
- [Curso "Flexbox: o guia completo"](https://dpw.dev/css/curso-flexbox/): Curso completo de Flexbox: guia definitivo e prático. Domine o sistema de layout unidimensional mais poderoso do CSS com exemplos práticos. Aprenda tudo!
- [Porque CSS Grid é melhor que Bootstrap para criar layouts](https://dpw.dev/css/css-grid-melhor-que-bootstrap/): Comparativo técnico: CSS Grid vs Bootstrap. Descubra por que Grid oferece código mais limpo, flexibilidade superior e layouts antes impossíveis.
- [Responsive Components: uma solução para container queries](https://dpw.dev/css/responsive-components-container-queries/): Responsive Components com Container Queries revolucionárias. Componentes que respondem ao próprio tamanho, não à viewport. Revolução no CSS moderno!
- [Curso "CSS Grid: o sistema definitivo de layouts"](https://dpw.dev/css/curso-css-grid/): Primeiro curso brasileiro de CSS Grid Layout. Aprenda o sistema definitivo de layouts web com exemplos práticos, técnicas modernas e abordagens reais.
- [16 dicas de Sass para facilitar sua vida (parte 1)](https://dpw.dev/css/sass-dicas-parte-1/): Descubra 8 dicas avançadas de Sass que você provavelmente não conhecia: prefixos, mixins, funções e técnicas que vão mudar seu CSS. Aprenda!
- [Motion UI: 4 formas de usar animação funcional](https://dpw.dev/css/motion-ui-4-formas-de-usar-animacao-funcional/): Descubra 4 formas essenciais de usar animação funcional em Motion UI. Feedback visual, navegação, orientação espacial e relacionamento. Anime com propósito!
- [Você não precisa de um framework CSS Grid](https://dpw.dev/css/css-grid-frameworks-consideracoes/): CSS Grid vs Frameworks: análise completa e imparcial. Descubra quando usar Grid nativo e quando frameworks CSS ainda fazem sentido em projetos. Decida!
- [Imagem de largura total em layout com limite de largura](https://dpw.dev/css/imagem-largura-total-layout-largura-limitada/): Imagem de largura total em layout com largura limitada. Técnica CSS para breakout de imagens full-width sem quebrar grid ou container. Truque incrível!
- [CSS @supports (CSS Feature Queries): detecção nativa de suporte a propriedades CSS](https://dpw.dev/css/css-supports-deteccao-nativa-suporte-css/): Domine CSS @supports (Feature Queries) para detectar suporte nativo. Melhore compatibilidade cross-browser sem JavaScript ou prefixos vendor. Use agora!
- [Desmistificando o CSS crítico "acima da borda"](https://dpw.dev/css/css-critico-acima-da-borda-desmistificando/): Análise crítica sobre CSS inline crítico acima da borda: vantagens, desvantagens e quando realmente usar. Otimização de páginas vs sites. Desmistifique!
- [Unidades de viewport: controle de tipografia em web design responsivo](https://dpw.dev/css/unidades-de-viewport-controle-tipografia-web-design-responsivo/): Domine unidades viewport para controle tipográfico responsivo. Use vw, vh, vmin/vmax para textos que escalam perfeitamente com a tela. Aprenda!
- [UX em validação de formulários com HTML e CSS](https://dpw.dev/css/ux-validacao-formularios-html-css/): UX em validação de formulários com HTML e CSS puro. Feedback visual imediato, mensagens claras e validação nativa para experiência superior. Implemente!
- [Livro "CSS Eficiente"](https://dpw.dev/css/livro-css-eficiente/): Resenha completa do livro CSS Eficiente de Maurício Samy Silva. Guia sobre técnicas, arquitetura e otimização de CSS para projetos profissionais. Leia!
- [Imagens responsivas com srcset e sizes](https://dpw.dev/css/imagens-responsivas-srcset-sizes/): Srcset e sizes: imagens responsivas baseadas em viewport HTML. Controle inteligente de resolução e densidade de pixels para performance otimizada!
- [Flexbox](https://dpw.dev/css/flexbox/): Guia completo de Flexbox: sistema de layout unidimensional do CSS. Domine todas as propriedades, alinhamento e distribuição de elementos flexíveis. Aprenda!
- [Unidades de CSS moderno: rem, vh, vw, vmin, vmax, ex, ch](https://dpw.dev/css/unidades-css-rem-vh-vw-vmin-vmax-ex-ch/): Unidades CSS: rem, vh, vw, vmin, vmax, ex, ch explicadas. Guia completo de unidades modernas para layouts flexíveis e tipografia responsiva. Domine!
- [Pré-processadores CSS e Chrome DevTools](https://dpw.dev/css/pre-processadores-css-chrome-devtools/): Aprenda a usar pré-processadores CSS no Chrome DevTools. Debug e edição de Sass/LESS diretamente no navegador com source maps. Acelere o workflow!
- [UIkit: framework front-end modular responsivo](https://dpw.dev/css/uikit-framework-front-end-modular-responsivo/): UIkit: framework front-end modular e responsivo profissional. Alternativa leve ao Bootstrap com componentes elegantes para desenvolvimento ágil. Use!
- [Webshims Lib: Polyfills de recursos de HTML5 e CSS3](https://dpw.dev/css/webshims-lib-polyfills-html5-css3/): Conheça Webshims Lib: polyfills completos para HTML5 e CSS3. Biblioteca de fallbacks para recursos modernos em navegadores antigos. Use jQuery!
- [Filtros CSS (CSS Filter Effects)](https://dpw.dev/css/filtros-css3-filter-effects-css/): Guia completo de filtros CSS3 (filter effects). Aprenda blur, brightness, contrast, saturate e outros efeitos visuais nativos impressionantes. Domine!
- [Como melhorar a performance do site limpando HTML, CSS e imagens](https://dpw.dev/css/como-melhorar-a-performance-do-site-limpando-html-css-e-imagens/): Aprenda técnicas práticas para melhorar performance limpando HTML, CSS e imagens. Aumente velocidade de carregamento e reduza drasticamente bounce rate!
- [Escrevendo CSS eficiente](https://dpw.dev/css/escrevendo-css-eficiente/): Escreva CSS eficiente para melhor performance web. Entenda seletores otimizados, especificidade e técnicas de otimização para sites rápidos. Otimize!
- [Usando Modernizr para detectar features de HTML5 e CSS3](https://dpw.dev/css/modernizr-detectar-features-html5-css3/): Modernizr: detecte features HTML5 e CSS3 no navegador facilmente. Biblioteca essencial para feature detection e progressive enhancement moderno. Use!
- [URLs longas apresentadas corretamente com CSS](https://dpw.dev/css/urls-longas-apresentadas-corretamente-com-css/): URLs longas apresentadas corretamente com CSS puro. Quebra de linha inteligente, overflow e técnicas para exibir links grandes adequadamente. Resolva!
- [Gradiente CSS cross browser: degradês em CSS sem usar imagens](https://dpw.dev/css/gradiente-css-cross-browser-degrades-css-sem-usar-imagens/): Crie gradientes CSS cross-browser sem imagens. Técnica completa para degradês compatíveis com todos os navegadores usando CSS puro. Funciona mesmo!
- [Diferenças entre IDs e Classes](https://dpw.dev/css/diferencas-entre-ids-e-classes/): Entenda de vez as diferenças entre IDs e Classes em HTML, CSS e JavaScript. Guia completo sobre quando e como usar cada um corretamente. Clarifique agora!
- [CSS float: considerações, dicas e macetes para bons layouts na web](https://dpw.dev/css/css-float-consideracoes-dicas-e-macetes-para-bons-layouts-na-web/): Guia completo sobre CSS float para layouts: o que é, para que serve, problemas comuns e técnicas de clearfix. Domine layouts tableless clássicos na web!

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml