CSS

10 jun, 2014

7 coisas que você não sabia que pode fazer com CSS

Publicidade

Acredite ou não, CSS e JavaScript estão começando a se equiparar, à medida que o CSS ganha mais funcionalidades. Quando eu escrevi o artigo “5 formas de interação de CSS e Javascript que você provavelmente não conhece”, muitos ficaram surpresos com essa aproximação do CSS e do JavaScript. Hoje, eu vou mostrar sete tarefas que você pode resolver com CSS – sem nada de JavaScript!

  1. CSS @supports

Todo bom front-end faz testes nas features antes de usá-las. Isso é sempre feito com JavaScript, e muitas pessoas usam o Modernizr para fazer isso, um pacote de utilidades muito bom com excelentes rotinas de testes. Uma nova API, no entanto, permite que você faça isso com CSS: @supports. Veja alguns exemplos de como @supports trabalha.

/* basic usage */
@supports(prop:value) {
	/* more styles */
}

/* real usage */
@supports (display: flex) {
	div { display: flex; }
}

/* testing prefixes too */
@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {

    section {
      display: -webkit-flex;
      display: -moz-flex;
    	display: flex;
    	float: none;
    }
}

O @supports, que também tem um similar em JavaScript, tem sido bastante pedido e não podemos mais esperar a hora para usá-lo!

  1. CSS Filters

Escreva um serviço para modificar os tons de cor em uma imagem, e você poderá vender isso para o Facebook por US$ 1 bilhão! Claro que isso é uma enorme simplificação, mas escrever filtros para imagens não é exatamente complicado. Eu fiz um app bem simples na minha primeira semana na Mozilla (que ganhou um concurso, inclusive… apenas comentando!) que usava um cálculo baseado em JS para criar filtros de imagens com canvas, mas hoje você pode fazer isso apenas com CSS!

/* simple filter */
.myElement {
	-webkit-filter: blur(2px);
}

/* advanced filter */
.myElement {
	-webkit-filter: blur(2px) grayscale (.5) opacity(0.8) hue-rotate(120deg);
}

Esse tipo de filtragem apenas cria uma máscara na visualização original da imagem e não salva ou exporta a imagem com o filtro, mas é ótimo para galerias de fotos ou em qualquer outro lugar que você queira adicionar um pouco de flare em uma imagem!

Veja o demo

  1. Pointer events e eventos de clique

A propriedade CSS pointer-events oferece um método para efetivamente desabilitar um elemento, de forma que um clique em um link nem disparará um evento JavaScript.

/* do nothing when clicked or activated */
.disabled { pointer-events: none; }

/* this will _not_ fire because of the pointer-events: none application */
document.getElementById("disabled-element").addEventListener("click", function(e) {
	alert("Clicked!");
});

No exemplo acima, o evento clique nem vai disparar, por causa do valor do evento Pointer do CSS. Eu acho isso incrivelmente útil porque você não precisa fazer um classNAme ou atribuir checks toda vez que verifica que algo está desabilitado.

Veja o demo

  1. Deslizar para cima e deslizar para baixo

O CSS nos permite criar transições e animações, mas às vezes precisamos das bibliotecas JavaScript para ajudar na modificação de algumas coisas e no controle da aniamação. Uma animação bastante popular são os efeitos de deslizar para cima e deslizar para baixo, que a maioria não sabe que podem ser feitos apenas com CSS!

/* slider in open state */
.slider {
	overflow-y: hidden;
	max-height: 500px; /* approximate max height */

	transition-property: all;
	transition-duration: .5s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

/* close it with the "closed" class */
.slider.closed {
	max-height: 0;
}

Uma forma inteligente de usar max-height permite que o elemento cresça ou encolha de acordo com a necessidade.

Veja o demo

  1. CSS Counters

Se você pensar no que “counter” (contador”) significa ao pensar em Internet, você provavelmente vai rir. Mas CSS Counters são uma coisa totalmente diferente – eles permitem que o desenvolvedor incremente um contador e o mostre via :before ou :after para um determinado elemento:

/* initialize the counter */
ol.slides {
	counter-reset: slideNum;
}

/* increment the counter */
ol.slides > li {
	counter-increment: slideNum;
}

/* display the counter value */
ol.slides li:after {
	content: "[" counter(slideNum) "]";
}

Você com frequência vê CSS Counters em slideshows em conferências e até em listas como uma tabela de conteúdos.

Veja o demo

  1. CSS Classes com Unicode

Há inúmeros documentos de boas práticas em CSS, mas todos começam com “como nomear suas classes CSS”. O que você nunca verá nesses documentos é para utilizar símbolos Unicode para nomear suas classes:

código

Veja o demo

  1. CSS Circles

CSS triangles são algo bacana, mas CSS circles também! Ao abusar do border-radius, você poderá criar círculos perfeitos!

Veja o demo

css-circles

Você pode adicionar gradientes aos seus círculos e até mesmo usar animações para fazê-los girar. Está para sair uma API mais uniforme para Shapes, mas você pode criar círculos agora com esse hack!

***

Artigo traduzido com autorização, publicado originalmente em http://davidwalsh.name/css-facts