Novamente falando sobre CSS3, hoje vamos abordar sobre as propriedades para interface, o que irá nos ajudar e muito no desenvolvimento de layouts. Acredito que a partir de agora você realmente observará o que CSS3 trouxe de diferente. Estilizar um elemento com sombras, multiplos backgrounds e outras coisas mais é bem legal, mas CSS3 vai muito além disso… Então “vamo que vamo”, que ainda temos muito a falar antes de terminar esta série.

Você pode conhecer Interface como sendo UI (user interface/interface do usuário), que é o mesmo conceito. Em minha visão, UI ou Interface, nada mais é do que uma disposição “padrão” que visa a facilidade de uso, mesclada com a experiência que o usuário teve em outros locais, a chamada usuabilidade. Interface é um assunto muito amplo, então sem mais delongas, puxando para o nosso assunto (CSS3), interface aqui tem como objetivo, trazer um padrão comum e mais rápido à disposição do layout. Sendo um pouco mais complexo, interface é o elo de ligação – automático – entre duas necessidades: menos CSS/HTML e melhores layouts.

Temos como exemplo, que se encaixa perfeitamente no que estamos falando, a necessidade de dividir um determinado layout em partes… Fazer isto na mão envolver muito código – como acontece com grids CSS – e é cansativo. Já usando as propriedades de Interface do CSS/CSS3 você consegue o mesmo resultado, de forma rápida e simples. É justamente ai que se encaixa a interface do CSS…

Recomendo que você busque pela internet sobre Interface, UI e usuabilidade, para não ficar “boiando” no assunto. Vejamos as propriedades de interface do CSS3:

Box-sizing

Você sabe que o box-model trabalha da seguinte maneira para se chegar a dimensão de um elemento:

• Altura = height + padding + border
• Largura =  width + padding + border

Também sabe que é dificil de trabalhar o box-model de um elemento dentro de outro, principalmente quando a largura do elemento filho tem o mesmo tamanho do elemento pai, porque o padding e a borda influenciam no tamanho final. Observe a imagem abaixo que você irá entender:

É um problema comum e creio que todos já passaram por isso. Com a sua experiência, é possível que já tenha uma solução “no bolso”, mas quero lhe informa que você está perdendo o seu tempo com essas técnicas, hacks ou seja lá o que for! Box-sizing veio justamente para solucionar este problema:

Sintax: [-moz- | -webkti-]?box-sizing: border-box | content-box | inherit

Veja a descrição para cada valor abaixo, assim você deve entender melhor o comportamento:

border-box: Neste caso a altura/largura do elemento é calculada fazendo a subtração das medidas do padding e border. Assim o elemento irá se encaixar perfeitamente, pois CSS toma a sua medida para altura/largura de acordo com a área disponível, logo depois da subtração do padding e border.
content-box: É  valor padrão. O comportamento não será alterado, ou seja, continua acontecendo a soma das propriedades para se chegar a dimensão do elemento.
inherit: Quem irá dizer como deve se comportar é o elemento pai, ou até mesmo uma declaração anterior que envolve o elemento em questão.

div{
	background: #F00;
	color: #FFF;
	height: 250px;
	width: 500px;
}
div p{
	background: #565656;
	border: 3px solid #000;
	display: block;
	padding: 20px;
	width: 100%;

	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

Box-sizing, é um pouco semelhante ao background-origin ou, até mesmo ao background-clip (falei sobre essas propriedades aqui). Não há muito o que falar… Setando o valor como border-box, o resultado é o esperado (veja a imagem mais acima).

As observações para box-sizing são:

• Também funciona com min-height, min-width, max-height, max-width.
• IE8 suporta box-sizing :).
• O prefixo -moz- surpota o valor adicional: padding-box. Padding-box, não faz parte da CSS-UI, então funciona apenas nos navegadores com a enginer Gecko (Firefox).
• -moz-box-sizing não se aplica a células de tabelas (table cells).

Veja o exemplo | Mais detalhes

Resize

Acho bem legal esta propriedade. Quem usa o Google Chrome já viu esta propriedade em textareas, onde você redimensiona o textarea como desejar. Resize é o mesmo conceito, mas agora aplicado a qualquer elemento, trazendo mais flexibilidade ao layout:

Sintax: resize: none | both | horizontal | vertical | inherit

none: Este é o valor padrão. Não será possivel fazer qualquer redimensionamento no elemento.
both: O redimensionamento se aplica tanto na vertical, quanto no horizontal.
horizontal: É possível o redimensionamento apenas na horizontal.
vertical: O redimensionamento somente é possivel na vertical.
inherit: Herda o valor do elemento pai, ou da declaração pai.

div{
	background: #FFF;
	border: 1px solid #CCC;
	color: #444;
	height: 250px;
	padding: 20px;
	width: 500px;
	overflow:auto;
	resize: both;
}

Resize trabalha diretamente na largura e altura do elemento (width e height), assim, quando o usuário for redimensionar o elemento, os propriedades alteradas serão apenas width e height. É claro que você não pode redimensionar um elemento para um tamanho menor que o definido, seria até sem lógica ser assim. Então fique atento a esta limitação…

Observações:

• Recomendo sempre usar overflow: auto, ou até mesmo overflow-x: auto e/ou overflow-y: auto.
• Resize não possui prefixos/vendors.
• Resize não tem nada a ver com scroll.

Veja o exemplo | Mais detalhes

Concluindo…

CSS3 trouxe algumas propriedades de peso que realmente irão no ajudar no desenvolvimento. Algumas são até revolucionárias! Então fique atento aos próximos posts que ainda tem muito o que falar…

Não há somentes estas duas propriedades para interface, que falamos mais acima. Nos próximos posts tem mais! Até a próxima.

A Séria Completa

Iniciando com CSS3
Prosseguindo com CSS3 – Bordas e Sombras
Avançando com CSS3 – Trabalhando com Backgrounds
Avançando com CSS3 – Entendendo as Cores
Aprendendo CSS3 – Trabalhando com Textos
Desenvolvendo CSS3 – Propriedades de Interface
Desenvolvendo CSS3 – Propriedades de Interface: Múltiplas Colunas em CSS3