CSSBR - SP

O incrível CSS


CSSBr

Olá amigos!

Sou Luiz Felipe Tartarotti Fialho, tenho 24 anos e trabalho como Desenvolvedor Front-End desde 2009.


Trendi

Em 2012...

Cartman

Um Piano...

Piano

(Em parceria com o Thiago Genuino)

Um Xadrez...

Xadrez

(Em parceria com o Thiago Genuino)

E o CSS Components...

CSS Components

É possível utilizar componentes desenvolvidos apenas com CSS?

Antes um pouco sobre código

Todas as interações foram desenvolvidas usando básicamente duas técnicas

:target

n:target

input[hidden]

< input type"radio/checkbox" hidden />

Através dessas técnicas conseguimos fornecer um estado para um elemento alvo. Ou seja, conseguimos trabalhar como eles vão se comportar quando estiverem "ativos".

Sobre o :target

Através do :target conseguimos adicionar interação em um elemento que possui o ID atrelado em algum [href]. Até um tempo atrás isso só era possível com Javascript.

HTML

 Example


CSS

 .modal {

  &:before {
    content: "";
    display: none;
    background: rgba(0,0,0,.6);
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1001;
  }

  .modal-dialog {
    top: -100%;
    .translate(-50%, -500%);
    .transition-transform(~"0.3s ease-out");
  }

  &:target {

    &:before {
      display: block;
    }

    .modal-dialog {
      .translate(0, 0);
      top: 20%;
    }
  }

}

Exemplo do Modal

Sobre o input[hidden]

É quase uma "gambiarra" :p

Deixamos um [checkbox] ou [radio] escondido usando [hidden] e trocamos seu status usando um label (sempre fizemos isso nos formulários).

O truque é usar ~ para adicionar interações em elementos irmãos do input.

HTML


...

CSS

.collapse-panel {
  display: none;
}

.collapse-open:checked ~ .collapse-panel {
  display: block;
}

Exemplo de Collapse

Essas técnicas funcionam no IE9+

Um pouco sobre performance...

Teste em um projeto real

Meu site pessoal...

Antes

Um resultado de teste no GTMetrix antes da alteração.

Old

O que foi feito?

  1. Removi todo o Javascript do projeto
  2. Passei a usar o CSS Componentes de Modal e Collapse.

Resultado

New

Teste final

  1. Otimizei o carregamento dos ícones e embedei CSS
  2. Retirei a imagem de "Fork".

Resultado final

Plus

Consolidando

Com Javascript

Old

Com CSS Components

New

Com otimizações de ícones e imagens

plus

Ou seja...

Aconteceu uma pequena melhora de performance ao usar CSS Components, mas ajustes que muitas vezes esquecemos de fazer, como diminuir requisições, podem causar um impacto muito maior na perfomance de um projeto.

É possível utilizar componentes desenvolvidos apenas com CSS?

Obrigado! :D



CSSBr