12 técnicas modernas de CSS para problemas de CSS mais antigos

Nota: apenas traduzi o texto abaixo e postei aqui. As referências estão no fim deste artigo.

Descobrir técnicas modernas de CSS é uma das melhores maneiras de apimentar o processo geral de web design. Se você tem trabalhado com CSS, pode ter encontrado alguns layouts ou problemas de compatibilidade entre navegadores. Por exemplo, estilos CSS3 não funcionam com versões legadas do Internet Explorer. Ainda assim, há muitas instâncias em que queremos usar um recurso e descobrimos que ele não é suportado ou se comporta de forma diferente entre navegadores. Portanto, ao trabalhar em tecnologias de desenvolvimento web, o teste de compatibilidade de navegadores de sites e web apps também é importante.

No entanto, conforme as tecnologias da web evoluem, os desenvolvedores estão se esforçando para descobrir como lidar com outros problemas também. Por exemplo, alavancar outras bibliotecas para otimizar o tempo de carregamento de um site muito carregado ou tornar as tags div mais responsivas sem depender muito do Bootstrap. Com os desafios em evolução e aumentando, o CSS também evoluiu.

Neste tutorial avançado de CSS, discutiremos 12 técnicas modernas de CSS para superar problemas antigos que vinham com CSS.

Vamos começar com técnicas modernas de CSS!

Novo em CSS Selectors? Confira esta Ultimate CSS Selector cheat sheet para impulsionar sua carreira em web design.

1. CSS Selectors avançados

Entender como os CSS selectors funcionam é essencial se você planeja desenvolver um arquivo CSS reutilizável que pode ser usado para outras páginas ou componentes de IU. Caso esteja procurando um recurso valioso que forneça informações perspicazes sobre CSS Selectors, confira The Ultimate CSS Selectors Cheat Sheet.

Você já deve estar familiarizado com selectors baseados em classes, em ID e em elementos. Vamos dar uma olhada em alguns selectors avançados.

Universal Selector

Universal selectors podem ser usados ​​em todos os elementos de um site. Por exemplo, se você quiser ter uma margin específica para todos os elementos em sua página, você tem que escrever –

* {
  margin: 1.5rem;
}

Attribute Selector

E se você quiser aplicar um style específico a certos elementos que têm atributos semelhantes, mas class names diferentes? Você pode usar attribute selectors.

[class*="component_"] {
    border: 2px solid blue;
}

Attribute selector aplicará uma border aos elementos com class name component_title e component_label.

Child Combinator

E se você quiser deixar o font size de um menu na navigation bar em negrito, mas o conteúdo nav for gerado dinamicamente? Eles não têm nenhuma CSS class específica. Você pode usar um child combinator.

.navigation-menu > ul > li > a {
    font-weight: bold;
}

Pseudo Classes

Você já viu uma tabela com linhas alternadas tendo uma cor diferente? Quer saber como podemos fazer isso com apenas algumas linhas de CSS? A resposta é pseudo-classes. Vamos dar uma olhada no código.

tbody tr:nth-child(odd) {
    background-color: green;
}

Ele aplicará um background verde às linhas ímpares da tabela.

Em vez de "ímpar" ou "par", você também pode usar properties como n+1 ou 3n+1 para aplicar properties diferentes a linhas diferentes.

2. Substituindo o antigo grid system

Quando chegou aos desenvolvedores, o bootstrap grid foi benéfico. Ele resolveu o propósito de ter containers responsivos uniformemente distribuídos em dispositivos de diferentes resoluções. Mas com o tempo, os desenvolvedores precisaram de uma solução alternativa. Não somos mais obrigados a usar uma biblioteca pesada apenas para grids.

Técnicas modernas de CSS como grid nos deram uma solução simplificada. Vamos descobrir como.

$minColumnWidth: 10rem;

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax($minColWidth, 1fr));
    grid-gap: 2rem;

    & + .grid {
        margin-top: $gridGap;
    }
}

Então, o que fizemos aqui?

Primeiro, definimos uma width mínima para grid elements.

Em grid-template-columns, usamos a repeat function para que o CSS aplique os mesmos parâmetros a cada column. Além disso, usamos auto-fit em vez de um número. O motivo é que as columns agora terão a mesma width, independentemente de quantas columns você usar, elas se esticarão e preencherão o espaço disponível.

Também usamos a minmax() function para definir a width máxima para cada column e mantivemos 1fr como o valor máximo. Isso garante que o conteúdo preencha uma coluna até o espaço total disponível.

Por fim, adicionamos um gap e uma regra opcional para aplicar o mesmo valor entre containers consecutivos.

O resultado?

Só há uma desvantagem. Para mais de três columns, em algumas viewports, você pode encontrar uma "orphan column".

Você pode resolver o problema com media queries, mas precisa escrever muitos códigos para vários breakpoints.

1. Mantendo o height uniforme dos elementos

Houve um tempo em que usávamos o jQuery para calcular para garantir que o height dos containers fosse igual. Isso foi quando o conteúdo dos dois containers não era igual, mas queríamos tornar o height deles igual para o UX.

Mas como as técnicas modernas de CSS tornaram o processo mais simples? Bem, usando o grid system.

/* Parent container */
.parent {
    display: grid;
    grid-auto-flow: column;
}
/* Child elements */
.child {
    height: 100%;
}

Ao alternar o grid-auto-flow para row ou column, podemos ter containers de width ou height uniformes.

Também podemos usar a mesma funcionalidade com código mais simples usando CSS flexbox.

/* Parent elements */
.parent {
    display: flex;

    /* Child elements */
    .child {
        height: 100%;
    }
}

Então, qual é melhor? A resposta é que ambos têm sua parcela igual de vantagens de uso. Se você quer uma solução para resolver apenas o problema de elementos com height igual, flexbox é a melhor opção. No entanto, no flexbox, os elementos podem não ter width igual.

O Grid, no entanto, pode lidar com elementos com width igual, se for isso que você precisa. Além disso, se você quiser ter um número máximo de columns em cada linha, grid pode lidar com a matemática. Mas se você usar flexbox, precisará definir um cálculo para esse propósito.

4. Melhorando a experiência do usuário com Smooth Scrolls

Com sticky headers, links "de volta ao topo" não são muito usados ​​hoje em dia, mas houve um tempo em que estavam na moda. A ideia era criar um link que permitisse ao usuário rolar de volta para o topo do site. Vamos descobrir como desenvolver links "de volta ao topo" usando técnicas modernas de CSS.

Vamos criar o conteúdo primeiro.

<header id="header">Title</header>
<main>
    <article>
        <!-- conteúdo vai aqui -->
    </article>
    <!-- Link "De volta ao Topo" -->
    <div class="back-to-top-wrapper">
        <a href="#header" class="back-to-top-link" aria-label="Go Back to Top">Top</a>
    </div>
</main>

Primeiro, adicionaremos smooth scrolling à nossa página.

html {
    scroll-behavior: smooth;
}

Então, estilizaremos o link "de volta ao topo" conforme nossa preferência. Você também pode adicionar um SVG icon bacana em vez de estilização manual.

Agora, é hora de escolher como sua rolagem se comportará. Defina um scroll length.

$scrollLength: 100vh;

Em seguida, no wrapper, defina o scroll value para o scroll length predefinido.

.back-to-top-wrapper {
    position: absolute;
    top: $scrollLength;
}

Adicione os styles necessários ao link "de volta ao topo". Lembre-se de usar position-sticky para mantê-lo em uma posição específica.

.back-to-top-link {
    /*
     * usando 'fixed' como fallback quando `sticky` não for suportado
     */
    position: fixed;
    position: sticky;
    /*
     * atinge o posicionamento desejado dentro da viewport
     * em relação ao topo da viewport quando `sticky` assume
     * o controle, ou sempre que o fallback `fixed` for usado
     */
    top: calc(100vh - 5rem);
    // ... outros styles
}

Pronto, temos o resultado desejado.

5. Melhorando a acessibilidade do seu site adicionando Alternate: focus

Acessibilidade é um recurso essencial para qualquer site, pois é obrigatório seguir as diretrizes WCAG. Mas o que significa acessibilidade? Significa que seus sites devem ser acessíveis a todos, especialmente para pessoas com deficiência.

Frequentemente, removemos :focus outlines em buttons ou links para nos livrar do style nativo. No entanto, ao fazer isso, deixamos de fornecer um "alternate focused stage". Como resultado, as pessoas que usam o teclado para navegar em um site não conseguem detectar o elemento atualmente em foco. É uma violação direta de acessibilidade.

Podemos sentir que o :focus style default do navegador não fica bem nos elementos atraentes que você manteve em sua página. No entanto, é o ideal seria adicionar algumas linhas de código para um "alternate focus style". Por exemplo, suponha que temos um button.

Você pode adicionar –

button:focus {
    outline: max(1px, 0.1em) solid currentColor;
    outline-offset: 0.25em;
}

Aqui, estamos considerando currentColor como a theme color da sua página. No seu caso, é green.

Usando outline-offset, podemos ajustar o espaçamento do outline do elemento.

Pronto, o "focused stage" não match à cor do button? Você também deve verificar as principais ferramentas para testes de acessibilidade.

6. CSS Font Rules e criação de uma Typography Scale fluida

A tipografia é a melhor maneira de melhorar a aparência de qualquer webpage simplista. CSS nos ajuda a desenvolver uma base de type scales essenciais. Vamos descobrir como.

font-unit recomendada

Está confuso sobre o que usar? %, rem, em ou px? A primeira coisa que você precisa fazer ao definir a tipografia é — esqueça o px. Ele não "scale" em proporção quando o usuário aumenta ou diminui o zoom no navegador. A unidade recomendada é rem.

O valor default de 1rem é 16px, e os font sizes definidos em rem permanecem consistentes quando os usuários aumentam o zoom no navegador.

em é proporcional à font-size rule do ancestral mais próximo de um elemento. Ele só pode ser usado quando você deseja o comportamento do child de spacing relativo ao parent element.

% tem comportamento quase semelhante ao em. No entanto, quando você precisa de dimensionamento relativo, em é mais preferível.

Confira o Nikola Testing - Teste seus sites baseados na estrutura CSS Nikola em mais de 3.000 navegadores diferentes para desktop e dispositivos móveis.

Prevenindo Text Overflow

Evitar text-overflow é uma boa maneira de proteger seu site do futuro. Ele garante que, se algum texto em um container aumentar no futuro, o texto não se mova para além do container ou de sua borda.

p,
li,
h1,
h2,
h3,
h4 {
    // Auxilia a evitar o overflow de palavras/nomes/URLs longas
    word-break: break-word;
}

Tipografia responsiva

Se você selecionou um font size grande globalmente, poderá ter overflow issues em dispositivos pequenos. Para resolver esse problema, temos um fluid type. Isso significa definir um valor de font size que se ajusta de acordo com a viewport, assim como imagens responsivas. Você pode usar um código para calcular o tamanho mínimo e o tamanho base.

font-size: unquote(
    "min(max(#{$fluid-min}rem, #{$fluid-scaler}), #{$level-size})"
);

Ou você pode usar vw (viewport width) como font unit.

Além da tipografia responsiva, você pode testar a responsividade do web design usando o LT Browser.

Usando LT Browser, uma ferramenta de teste responsivo que permite testar sites para teste responsivo em mais de 50 viewports de dispositivos pré-construídas.

LT Browser vem com recursos incríveis como Sincronizar dispositivos em paralelo em várias viewports de dispositivos para obter uma melhor visualização do conteúdo de mídia e objetos. O recurso de network throttling pode ajudar você a testar sites em diferentes condições de rede, de parâmetros baixos a altos, como online, 3G lento, 3G rápido e até offline.

LT Browser é equipado com todas as ferramentas e recursos essenciais que desenvolvedores e designers precisam em seu workflow diário. Para saber mais sobre os recursos do LT Browser, você pode consultar nosso blog: 11 razões pelas quais os desenvolvedores devem usar o LT Browser.

O vídeo passo a passo abaixo ajudará você a começar a usar o LT Browser!

7. Styling Radio Buttons

Desenvolvedores precisam de um radio button com style customizado, pois o HTML radio button default aparece de forma diferente em navegadores diferentes. A seguir está a aparência dos radio buttons no Firefox em execução no Mac.

E é assim que eles ficam no Safari.

Não só isso, radio buttons nativos não podem ser scaled com o font-size.

Vamos verificar a solução para criar um radio button uniforme que apareça da mesma forma em todos os navegadores e seja scaled consistentemente com o font-size da label.

Vamos começar com o HTML primeiro.

<label class="radio radio-gradient">
    <span class="radio-input">
        <input type="radio" name="radio">
        <span class="radio-control"></span>
    </span>
    <span class="radio-label">Option 1</span>
</label>
<label class="radio radio-before">
    <span class="radio-input">
        <input type="radio" name="radio">
        <span class="radio-control"></span>
    </span>
    <span class="radio-label">Option 2</span>
</label>

Agora, vamos ao CSS. Estamos usando SCSS para facilmente theming os radio buttons.

Primeiro, criaremos uma color variable customizada.

:root {
    --color: green;
}

Em seguida, estamos usando um universal selector para resetting o box-sizing method. Ele incluirá border e padding no cálculo do tamanho final de qualquer elemento.

*,
*:before,
*:after {
    box-sizing: border-box;
}

Adicionamos uma CSS class .radio às labels. Estamos usando grid-gap para adicionar algum espaçamento entre o button e as labels. Também usaremos :focus-within e transform para que o tamanho da label aumente quando essa opção específica estiver em foco.

.radio {
    display: grid;
    grid-template-columns: min-content auto;
    grid-gap: 0.5em;
    font-size: 2.25rem;
    color: var(--color);

    &:focus-within {
        .radio-label {
            transform: scale(1.05);
            opacity: 1;
        }
    }
}

Ajustaremos a line-height, adicionaremos uma transition e também reduziremos a opacity da label quando a opção não estiver em foco.

.radio-label {
    line-height: 1;
    transition: 180ms all ease-in-out;
    opacity: 0.8;
}

Adicionaremos um display-flex ao button que encapsula o "control" customizado e o input nativo.

Também usaremos um box-shadow duplo no focused stage e garantiremos uma diferença entre o button base e o focused stage.

.radio-input {
    display: flex;

    input {
        opacity: 0;
        width: 0;
        height: 0;

        &:focus + .radio-control {
            box-shadow: 0 0 0 0.05em #fff, 0 0 0.15em 0.1em currentColor;
        }
    }
}

Adicionando um style quando o button está no "checked stage".

.radio-gradient input:checked + .radio-control {
    background: radial-gradient(
        currentcolor 50%, rgba(255, 0, 0, 0) 51%
    );
}

Criando o :before element, para animar o button quando ele estiver unchecked.

.radio-before {
    .radio-control {
        display: grid;
        place-items: center;
    }

    input + .radio-control::before {
        content: "";
        width: 0.5em;
        height: 0.5em;
        box-shadow: inset 0.5em 0.5em currentColor;
        border-radius: 50%;
        transition: 180ms transform ease-in-out;
        transform: scale(0);
    }
    input:checked + .radio-control::before {
        transform: scale(1);
    }
}

Por fim, adicionando o style ao radio button e ao body.

.radio-control {
    display: block;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 0.1em solid currentColor;
    transform: translateY(-0.05em);
}
body {
    min-height: 100vh;
    display: grid;
    place-content: center;
    grid-gap: 2rem;
    padding: 1rem;
}

Aqui está o output:

8. Mantendo a bottom position do footer

Embora com Single page applications, esse problema não surja tanto, se você estiver criando uma webpage estática, você pode frequentemente encontrar seu footer flutuando para cima.

Podemos nos livrar desse problema com dois métodos.

Grid

Vamos dar uma olhada no código.

body {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

Aqui, mantivemos um height mínimo do body. Depois disso, usamos grid-template-rows para espaçar o conteúdo corretamente. O método usa uma unidade fracionária que calcula o espaço disponível e o distribui para várias linhas. Assim, ele preencherá todo o espaço disponível entre o header e o footer.

Flexbox

Usando flexbox, o método é mais simples.

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

Primeiro, com min-height, garantimos que o body se estende até a height total da tela. Então, definir uma flex-direction retém block elements empilhados e mantém o comportamento do document normal.

9. Images animadas

Quando o CSS não era muito modernizado, os usuários tinham dificuldade para animar image captions e image sizes usando jQuery e position:absolute.

No entanto, hoje em dia, com algumas linhas de código, podemos animar captions e disparar as animações ao passar o mouse sobre uma image. Vamos dar uma olhada no código.

.image-caption {
    /* ... styles existentes */
    transition: transform 500ms ease-in;
    will-change: transform;
}
/*
 * A CSS property transition ajuda a animar a caption. 
 * Podemos disparar a animação ao passar o mouse usando -
 */
.image:hover {
    .image-caption {
        transform: translateY(0);
    }
}

Ele resolve o problema com o mouse hovering. Mas e se alguém usar um teclado para navegar em uma webpage? Nesse caso, podemos usar o focus em vez do hover.

.image:focus {
    outline: none;
}
.image:hover,
.image:focus {
.image-caption {
    transform: translateY(0);
}

10. Uso avançado de Border Radius e Box Shadow

Desenvolvedores hoje em dia não precisam lidar com o incômodo de criar boxes com cantos arredondados para containers que eles querem tornar arredondados. Graças à css property border-radius que o CSS3 nos deu. Por exemplo:

.element {
    border-radius: 20% 50%;
}

Eu sei, é uma forma estranha. Mas isso foi feito para demonstrar o uso de border-radius; se você aplicar valores calculados, você pode dar a um container qualquer forma que você quiser. Por exemplo –

.element {
    border-radius: 3vw 4vw 8vw 2vw;
}

Podemos usar valores percentuais que são relativos ao tamanho do elemento. Unidades relativas como vw (unidades de viewport) são úteis se você quiser manter a consistência. Elas parecem menores no celular e maiores no desktop, mas mantêm um formato redondo consistente.

Outra propriedade interessante que nos ajuda a adicionar uma experiência de usuário agradável e relaxante aos elementos da nossa página é box-shadow. Normalmente usamos box shadow para adicionar uma dica de elevação a elementos como cards ou buttons. Por exemplo:

.element {
    box-shadow: 3px 4px 5px 0px rgba(0, 0, 0, 0.38);
}

Aqui, temos um offset horizontal de 3px e um offset vertical de 4px. Também temos um blur radius de 5px, nenhum spread radius e color shadow acinzentado. Você pode ajustar os valores conforme sua escolha para melhorar a aparência do box.

Uma feature exclusiva do box-shadow é que você pode adicionar várias camadas. Por exemplo:

.element {
    box-shadow: 2px 4px 0 4px yellowgreen,
      4px 8px 0 8px yellow,
      8px 10px 0 12px red;
}

Também temos um image hack interessante. Quer saber como adicionar efeito de vinheta a uma image usando box-shadow? A resposta é, usando inset shadows.

.image-container {
    width: 30vmin;
    height: 30vmin;
    box-shadow: inset 0 0 4vmin 3vmin rgba(0, 0, 0, 0.5);
}

11. Mantendo seus elementos centralizados

Antes, se precisássemos manter um elemento no centro de uma página, tínhamos que usar absolute positions e definir valores de left, right, top e bottom. Bem, esses dias acabaram. As técnicas modernas de CSS nos fornecem uma solução direta que ajuda a manter uma posição centralizada em várias resoluções.

Para manter um elemento centralizado horizontal e verticalmente, temos que adicionar apenas duas propriedades ao elemento.

.element {
    display: grid;
    place-content: center;
}

Se você quiser usar flexbox para manter a consistência entre os outros elementos do flexbox na página, precisará de uma linha extra de styling.

.element {
    display: flex;
    align-items: center;
    justify-content: center;
}

Agora, e se você quiser colocar um elemento alinhado centralmente em qualquer eixo específico? Bem, nesse caso, você tem que remover a CSS property display. Para alinhamento centralizado verticalmente, você tem que escrever:

.element {
    /* ... */
    align-content:center;
    /* ... */
}

Aqui está o resultado:

Por outro lado, para manter um elemento centralizado horizontalmente, em vez de align-content, você deve usar justify-content.

.element {
    /* ... */
    justify-content:center;
    /* ... */
}

A solução mencionada acima foi para grid items. Para flex items, o código muda um pouco.

Para alinhamento vertical, você tem que escrever:

.element {
    /* ... */
    justify-content: center;
    flex-direction: column;
    /* Para alinhamento horizontal, você precisará de */
    justify-content: center;
    /* ... */
}

12. Desenhando Formas Usando CSS

As técnicas modernas de CSS nos poupam do trabalho de usar scripts para desenhar objetos. Agora temos alguns métodos úteis para criar formas CSS básicas. Vamos descobrir como criar triângulos CSS.

Usando Borders

Usar a CSS property border pode nos ajudar a criar triângulos. Vamos começar com o container primeiro.

.triangle {
    border-style: solid;
    border-color: transparent;
}

Agora, vamos usar a CSS property border-width e dar uma cor ao lado esquerdo da borda.

.triangle {
    border-style: solid;
    border-color: transparent;
    /* top | right | bottom | left */
    border-width: 7px 0 7px 10px;
    border-left-color: blue;
}

O resultado é mostrado abaixo:

Podemos embaralhar os valores top, right, bottom e left de border-width para alterar a orientação do triângulo.

Usando linear-gradient

Podemos usar isso junto com a CSS property background-image.

Primeiro de tudo, vamos criar um container, dar dimensões e evitar background-repeat.

.triangle {
    width: 8em;
    height: 10em;
    background-repeat: no-repeat;
}

Agora, vamos adicionar nossos gradients. Isso dará uma cor azul à metade do container.

Após adicionar os dois gradients, a forma se torna como um triângulo espelhado no container.

.element {
    background-image: linear-gradient(
      32deg, blue 50%, rgba(255, 255, 255, 0) 50%
    ),
    linear-gradient(
        148deg, blue 50%, rgba(255, 255, 255, 0) 50%
    );
}

Agora, vamos tentar fazer o box parecer um triângulo. Vamos mudar o background-size. Nosso triângulo terá 100% de width, mas apenas metade da height.

.element {
    /* ... */
    background-size: 100% 50%;
    /* ... */
}

Finalmente, para evitar overlapping, temos que adicionar uma background position, já que a position default de ambos os gradientes é 0 0.

.element {
    /* ... */
    background-position: top left, bottom left;
    /* ... */
}

Então, nossa forma finalmente parece um triângulo. No entanto, há uma desvantagem nesse método. A forma não é responsiva. Se a proporção mudar, talvez precisemos recalcular os graus.

Concluindo!

O CSS está evoluindo em um ritmo rápido. Desenvolvedores estão criando CSS-only libraries para depender menos de scripts e reduzir o tamanho de um site, tornando-o mais amigável ao SEO. Esperamos que este tutorial avançado de CSS seja útil para você explorar como as técnicas modernas de CSS nos ajudam a resolver alguns problemas comuns que os desenvolvedores geralmente enfrentam e dependem de scripts para resolver. Informe-nos se você conhece ou usou alguma outra técnica moderna de CSS para resolver problemas relacionados ao design.

Fonte

Artigo escrito por arnabroychowdhury.