O que você tem que saber sobre CSS3

Muitos de vocês provavelmente já perceberam toda a agitação em torno do CSS3, mas exatamente quais técnicas podemos usar hoje?

Neste artigo, vou mostrar algumas técnicas diferentes CSS3, que alguns dos principais navegadores (mais especificamente Firefox, Chrome, Safari e Opera) já suportam. Com isso ficará evidente a degradação do layout pela falta de suporte dos outros browsers (como por exemplo o Internet Explorer). Usando as extensões específicas disponíveis para cada navegador, muitos dos estilos que estão sendo especificados no CSS3 já podem ser usados hoje!

CSS Vendor Extensions

O CSS permite que os desenvolvedores de navegadores criem implementações proprietárias para os mais variados estilos CSS. Isso permite ao distribuidor do navegador realize implementações próprias para determinada propriedade CSS, mesmo que já padronizado ou especificado, o que não é tão comum nem tão recomendado. Para utilizar no CSS, a propriedade que deseja utilizar para determinado(s) navegador(es) deve ser precedida de um prefixo. Esse prefixo indicará que se trata de uma extensão que somente aquele navegador interpretará.

Alguns browsers com seus prefixos (CSS Proprietary Extensions Scheme):

• Firefox : -moz-
• Safari: -webkit-
• Chrome: -webkit-
• Opera: -o-
• IE: -ms-

A grande vantagem das extensões é que os navegadores podem ir implementando as novas propriedades, como no caso do CSS3. Propriedades essas que já estão previstas, porém não especificadas. Isso certamente acelera a evolução dos navegadores em relação ao suporte às novas propriedades; Prepara os “CSS coders” para a nova forma de trabalhar; e contribui para a especificação oficial do CSS propriamente dita.
Clique se quiser saber mais sobre (CSS Proprietary Extensions Scheme);

Como você deve ter percebido, uma grande desvantagem de usar essas extensões é o fato de que acabamos tendo que repetir as propriedades para que funcione em todos os navegadores. É isso ou procurar soluções com javascript, folhas de estilos alternativas entre outras “viagens” para que a manutenção do código continue simples onerando o mínimo de recursos. Tudo bem, não basta falar, vamos mergulhar na direito no CSS3! Nota: os estilos sem um prefixo é a proposta da especificação atual W3C.

mais…

Webmonster: hoje, só amanhã

Esta semana não tem tira pois eu, o Webmonster,  fiquei o carnaval inteiro de plantão. Desejo que todos vocês morram de ressaca enquanto ouvem os batuques infernais das malditas escolas que ganharam a merda do carnaval.

Webmonster: Todo carnaval tem seu fim

Otimizando seu CSS

CSS Sprites

CSS Sprites consiste em unirmos imagens em apenas um arquivo, utilizando CSS para posicioná-las e mostrá-las em seu HTML.

O principal objetivo da utilização desta técnica é a economia de requisições HTTP, fazendo com que seu site ganhe performance e economize banda.

Imagem

Para começar, unimos todas as imagens utilizadas em apenas uma:

mais…

Webmonster: A Night at the Opera

O que perdemos com o IE6

Há pouco tempo o serviço federal de segurança da informação(BSI) alemão e a agência nacional de segurança de sistemas informação(SGDSN) francês publicaram notas, respectivamente aqui e aqui para que os usuarios de internet não utilizem mais o Internet explorer, o motivo dito por eles é uma falha de segurança que permite injetar código malicioso através de uma página web. Esses boletins publicados fizeram com que a Microsoft logo disponibilizasse um service pack para a correção do problema.

mais…

Webmonster: Origins

jQuery 1.4 o que há de novo

Gostaria de demonstrar aqui meu entusiasmo em relação a recém lançada versão do jQuery.

A versão 1.4, lançada no dia 14 de Janeiro traz muitas novidades interessantes, além de aperfeiçoamentos que ainda precisavam ser feitos. Uma boa melhorada na performance dos scripts fazem essa versão ainda mais competitiva nos aspectos em que perdia para outros grandes frameworks do mercado (ver comparativo de performance entre os frameroks js) aqui ou aqui.

mais…

Aumente sua velocidade e qualidade de desenvolvimento com CSS Frameworks: Acredite, eles podem ajudar.

No dia-a-dia do desenvolvimento, muito se ouve falar em “frameworks” e geralmente quando essa palavra é mencionada, estamos falando de um pacote de classes, implementadas em alguma linguagem, utilizando design-patterns, tirando o máximo proveito da performance que a linguagem em questão tem a oferecer e solucionando a maioria dos problemas comuns no desenvolvimento de sistemas. Há casos que os frameworks dão um suporte maior ainda, oferecendo melhor integração entre ambientes, soluções para infra-estrutura da aplicação e até mesmo scripts que geram algum código útil para adiantar o trabalho do desenvolvedor.

Talvez pelo termo “Framework” estar tão associado à idéia de facilitar o desenvolvimento “back-end” do sistema, que a primeira vista podemos encarar um “Framework CSS” como alguma coisa que vai processar folhas de estilo do lado do servidor, que vai gerar CSS dinamicamente ou algo do tipo.

Se você (assim como eu), também teve essa percepção sobre o assunto antes de explorá-lo, pode ter ficado com uma impressão ruim a respeito dos frameworks CSS.

mais…

Microformats

Microformats é um conceito de padronização para elementos comuns existentes na maioria dos websites (como informações de contato, eventos, tags, resenhas, etc) usando nada mais que a própria sintaxe XHTML para tanto, sem scripts ou arquivos anexos. A idéia central deste conceito é gerar meta-dados a partir da própria formatação tornando os textos mais ricos em informação – sem que isso altere em nada a vida do usuário comum. Basicamente, as informações extras atribuidas são colocadas como classes CSS, na tag REL e na tag TITLE, tendo interferência praticamente nula no resultado visual. Entre muitas,  algumas vantagens dos Microformats são:

mais…