Todos os posts da Categoria: Posts de: agosto de 2008
CSS Box Model
Entender como funciona o Box Model é essencial para aqueles que querem migrar das tabelas e começar o desenvolvimento de layouts utilizando CSS. É essencial entender como o browser renderiza os elementos HTML para não passar por problemas com Float. Os elementos na página são renderizados como retângulos, então, todas as tags HTML funcionam como caixas, e essas caixas são formadas por 4 áreas retângulares que são as seguintes:
- Conteúdo
- Espaçamentos (padding)
- Bordas (border)
- Margens (margin)
Imagem Ilustrativa do Box Model
Diagrama em 3D do Box Model gentilmente cedida pelo site hicksdesign.
O que muita gente não sabe quando está iniciando é que o padding é somado a largura total do elemento, ou seja, se temos uma div com uma largura fixa de 300px, e definimos um padding de 10px, ao invés de 300px agora essa div passará a ter 320px de largura, ganhamos 10px de cada lado. É muito importante lembrar-se disso, o padding é somado a largura total. Com margin ocorre a mesma coisa, se definirmos 20px de margin para nossa div, de 320px ela passará a ter 360px. E não se esqueçam de que isso também ocorre com as bordas, se definirmos 2 pixels de borda, a largura agora passará a ser 364px de largura total em nossa div
Características das áreas do box
As margens são sempre transparentes e cada browser tem uma margem default que é definida pelo próprio browser, embora as especificações CSS definam uma margem default(0) para cada elemento HTML, cada fabricante de browser adota um valor default para a margem. As bordas são sempre transparentes e seu valor default é igual a 0. O padding é transparente e seu valor default também é igual a 0. O background(fundo) está sempre por trás do conteúdo e do espaçamento.
Para corrigir esses comportamentos por default do browser, é aconselhável você iniciar seu CSS com um seletor universal (*) zerando todos as margens e paddings dos elementos HTML.
* {margin:0; padding:0}
Utilizando o seletor universal (*) em conjunto com margin:0 e padding:0 você quer dizer que todo elemento HTML irá iniciar com o valor padrão de margin e padding iguais a 0.
CSS Debug Tools
Possuir boas ferramentas para o desenvolvimento web, é essencial, portanto, a primeira coisa que você desenvolvedor web deve fazer é utilizar um bom browser como padrão, recomendo o Firefox, você deve testar seus sites em outros browsers também, isso é óbvio, mas sempre desenvolva primeiro para o Firefox, depois para os outros browsers. Porque?
Firefox é um browsers Standard Compliance, ou seja, segue a risca os padrões web, e ainda você possui a possibilidade de instalar extensões que podem lhe auxiliar no desenvolvimento. Se você possui somente o Internet Explorer instalado no micro, baixe o Firefox agora.
Extensões Firefox que auxiliam no desenvolvimento
Web Developer Toolbar é muito útil por mais de 100 motivos diferentes, você pode, por exemplo, editar o CSS dessa página com essa extensão.
CSSViewer lhe proporciona a possibilidade de visualizar as propriedades CSS aplicadas a qualquer elemento na página de uma forma simples e clara.
CSS Debug Toggle Bookmarklet permite visualizar toda a estrutura da página com um só clique. Adicione esse link aos seus favoritos para um acesso rápido.
Firebug é a ferramenta utilizada por 9 em cada 10 desenvolvedores web, ele integra a possibilidade de você editar, debugar e monitorar, HTML, CSS e JavaScript em tempo real em uma página web
Compatiblidade CSS no Internet Explorer
O Internet Explorer é um browser que possui suporte precário a CSS, a própria Microsoft reconhece isso, pois em seu site você pode ver uma lista com todas as propriedades CSS suportadas pelo Internet Explorer desde a versão 5.0 até a versão 8.
Por exemplo, hoje o Internet Explorer 6 possui total suporte as especificações CSS nível 1, e sua futura versão 8 terá total suporte a CSS nível 2.1, e algumas propriedades CSS 3. Só é triste ver que coisas tão interessantes, que ajudariam e muito no desenvolvimento web, ainda não são suportadas.
Adicionar ícones a links externos
Mostrar ao usuário de forma criativa que determinado link de seu site faz referência a outro, é uma boa regra de usabilidade, você pode fazer isso com CSS, de uma forma bem simples, mas infelizmente não irá funcionar no Internet Explorer, ou você pode fazer isso através de JavaScript. Caso você não seja ninja nessa arte, pode fazer isso facilmente com jQuery.
O que basicamente é feito pelo JavaScript é testar se o location.hostname, o link do hostname, é o mesmo representado no this.hostname. Basicamente ele efetua o seguinte teste: this.hostname && location.hostname !== this.hostname.
A função filter()
Nesse exemplo vamos utilizar a função filter() para testar todos os nossos links, vejam uma descrição do script abaixo:
$(document).ready(function() {
$('a').filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).after(' <img src="external.png" alt="external link" />');
});
A função irá verificar os links, e se achar algum link externo ao meu site, adiciona-rá uma imagem indicando isso. Exemplo do script em ação.
Esse tutorial é uma adptação do original de: Learning jQuery.
Håkon Wium Lie - O Criador das CSS
Não é possível falar de CSS sem antes conhecermos um pouco sobre seu criador, Håkon Wium Lie. Ele é um Norueguês, de nome complicado, que veio ao mundo para mudar a forma de desenvolvimento para a Web. Antigamente, os desenvolvedores conseguiam formatar suas páginas utilizando títulos e parágrafos, mas isso não era o suficiente, e no ano de 1994, ele propôs a criação das CSS, trabalhando em conjunto com Tim Berners-Lee e Robert Cailliau.
Já trabalhou em empresas como: YesLogic, INTBAU, Skarpsno vel, onde atualmente trabalha na empresa Opera Software, onde é chefe de tecnologia.
Se surgiu interesse em saber mais sobre a vida de Håkon Wium Lie, seria interessante você dar uma olhada nos seguintes links:
