Faça o curso: jQuery na Prática

Cantos arredondados. Eles já eram uma "grande coisa" alguns anos atrás e, embora existam várias soluções hoje, eles continuam sendo um obstáculo que não pode ser superado com muita elegância. Quando o CSS3 foi apresentado, uma das primeiras características mostradas foi a propriedade border-radius, nos inibindo de aplicar cantos arredondados com o CSS. Lembra como todos estavam felizes? Pare de pensar assim e leia este artigo para ver como é que a idéia já está falhando antes mesmo de encontrar a maneira para cada navegador moderno.

Como as coisas serão

Há um tempo atrás, técnicas de design eram necessárias para obter bordas arredondadas em um conteiner transparente. Desde que nós decidimos não usar o JavaScript, começamos a procurar outras opções, finalmente estabelecendo a resolução de algumas boas e velhas críticas. A ultima versão do Firefox e WebKit (Safari e Chrome) tem suas próprias propriedades para renderizar bordas arredondadas usando CSS. Seu uso é extremamente simples e seus resultados claramente bonitos.

div {border-radius:10px;}

O código acima demonstra o fácil uso que é definido pelos membros da W3C (World Wide Web Consortium). Esta declaração cria bordas arredondadas, criadas em um círculo com raio de 10px. Além desse, é possível configurar valores separados ambos para os raios horizontais e verticais e cada borda separadamente. Considerando o espaço deste artigo embora, a declaração acima nós realmente precisamos.

Uma pequena situação de teste

Há uma semana ou mais, eu estava tentando projetar no HTML e desde que eu precisei de bordas arredondadas eu notei que eu poderia usar a propriedade de Firefox (antes de tudo, isso era somente um exercício de design). O que eu precisei foi de uma barra de navegação com 4 bordas arredondadas. Um caso pouco simples, então eu adicionei bordas arredondadas no ul, oscilando os elementos li e acrescentando alguns retoques finais para os estados active e hover. Foi onde começou a falhar.

Firefox e WebKit tem seus próprios border-radius implementados agora, então nós iremos usar aqueles para construir e demonstrar nosso teste. A pagina teste contém uma configuração simples de navegação horizontal (sem algum projeto ideal), então dê uma rápida olhada para obter um entendimento melhor da situação (e problema).

Página de teste >> barra de navegação com bordas arredondadas.

(trabalha somente em versões que suportam a funcionalidade, como Safari,  Firefox e Chrome)

O que correu mal

O problema são as expectativas. Em nossa cabeça, bordas arredondadas (e bordas) são muito mais do que um elemento de desenho. Se você colocar bordas em um conteiner e você arredonda eles, o conteiner se torna tudo que está dentro da área entre as bordas. A parte fora do arredondamento não é uma parte do conteiner. Os especialistas do W3C parecem levar em conta como cor do background e imagens no conteiner são tampadas igualmente.

O que está faltando são regras que indicam o comportamento dos elementos dentro do conteiner. No exemplo acima, significa a lista e os elementos dos links. Embora o ul (conteiner) receba bordas arredondadas, a ligação de elementos parece desconhecer isso, então quando eles têm um background eles sobrepõem as bordas arredondadas. Eu não acho que alguém ia considerar isto lógico, ou mesmo preferiu este comportamento. Se você voltar na Página de teste e você coloca o mouse sobre o primeiro elemento que você verá como é que este não é exatamente o que você esperaria que fosse.

Conserte isso

Existem, evidentemente, várias soluções, mas nenhuma delas é boa. Você poderia colocar as bordas nos links dos elementos, mas então você tem que se preocupar com as bordas duplas e recebendo os arredondamentos do lado direito da barra. Outra opção é permitir que a borda principal na ul e puxar o primeiro elemento acima da borda usando margens negativas, depois aplicar o mesmo arredondamento para o elemento li.

Existem provavelmente outras soluções, mas tem uma razão por eu não estar explicando-as totalmente ou mesmo me incomodar a obtê-las através de qualquer forma clara. Uma implementação como essa é simplesmente impossível. E eu não posso imaginar que vamos ter de lidar com coisas simples como essa. Se essa é a forma como a execução será em 5 anos, propriamente, já é um fracasso para mim.

*

Publicado originalmente em http://www.onderhond.com/blog/work/trouble-with-rounded-corners