Não, isso não é brincadeira não, isso foi anunciado no blog do Internet Explorer no MSDN, pois pelo que parece, a nova versão do IE que será lançada em um fuuro próximo passou no teste do Acid2. Pra quem não sabe no que consiste o teste, é onde os desenvolvedores de browsers podem ver o quanto de padrões web são suportados pelo browser.
Tem até um vídeo no Channel 9 mostrando o teste.
Nessa galeria você pode ver os melhores sites de 2007 baseados em XHTML e CSS e ver o poder do que é capaz ter um pouco de criatividade aliado aos WebStandards. Um site que eu achei interessante foi o do Alex Buga:
Infelizmente meu blog não saiu nessa lista, mas vamos ver se ano que vem ele aparece né, pois agora comprei o livro do Maujor, acho que agora aprendo CSS e desenvolvo um layout interessante aqui para o Blog.
Eric Meyer criou a algum tempo uma solução muito simples com CSS para mostrar falhas de marcação em nosso HTML que podem nos passar despercebidas a não ser que você valide seu código para encontrá-las, como: imagens sem o atributo alt, links que não levam a lugar algum, facilitando e muito a vida dos desenvolvedores:
a[href="#"] {background: lime;}
a[href=""] {background: fuchsia;}
img {outline: 5px solid red;}
img[alt][title] {outline-width: 0;}
img[alt] {outline-color: fuchsia;}
img[alt], img[title] {outline-style: double;}
img[alt=""][title], img[alt][title=""] {outline-width: 3px;}
img[alt=""][title=""] {outline-style: dotted;}
Se você utiliza a Web Developer Toolbar pode identificar facilmente esses erros, mas utilizando CSS a identificação é mais apurada. Vejam só uma página de exemplo.
Post-its são aqueles pequenos papéis com um adesivo atrás para serem colados em qualquer superfície, que são geralmente usados para lembretes, quem trabalha com Internet utiliza muito isso, e hoje, vamos aprender de uma maneira muito simples a fazê-los com CSS. Primeiramente esse tutorial não foi originalmente desenvolvido por mim, essa técnica foi originalmente desenvolvida por GiorgosK.
Para esse tutorial faremos o uso de uma imagem PNG que utilizaremos como background, e de uma artimanha para fazer a transparência da imagem PNG funcionar no IE6 e menores, que um dia eu explico aqui como funciona.
<div id="postit">
<p>Post its com CSS</p>
</div>
#postit {
width:188px;
height:188px;
padding:40px;
color:#663333;
text-align:left;
background:url(postit.png) no-repeat left top;
}
Para que a imagem fique com fundo transparente no IE, crie um novo arquivo CSS com o seguinte conteúdo:
#postit { azimuth: expression(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter ="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",this.runtimeStyle.backgroundImage = "none")),this.pngSet=true);
}
E chame na sua página o seguinte css para browsers que sejam IE:
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="ie.css" />
<![endif]-->
Não se esqueçam de salvar na mesma pasta em que salvou o CSS um gif transparente que faz com que o IE processe a transparência.
Tudo ok agora é só ver como ficou nosso post-it, bem legal para você colocar lembretes no blog.
Design by Grid é uma galeria de sites web desenvolvidos utilizando grids.
Grid se trata de uma imagem genérica que serve como guia para o desenvolvimento criada por Cameron Moll.
Grid Calculator é um gerador de layouts que se baseia no tamanho da letra, número de colunas, altura das colunas e a distância entre as mesmas.
Grid Generator é um gerador de imagens quadriculadas para se utilizar como fundo na hora de desenvolver. Uma vez gerada, é só efetuar o download da imagem.
Layout Grid é onde podemos efetuar o download de uma imagem que nos auxilia no desenvolvimento.
Até hoje isso só aconteceu comigo uma vez, mas muita gente já deve ter passado por isso e não encontrou alguma solução, mas o problema consiste no seguinte:
Eu tinha uma div com um texto qualquer, e o IE repetia as últimas 3 letras da última palavra do texto, ou seja, se eu tinha um texo assim: Lorem Ipsum, no IE era criada mais uma linha de texto com o seguinte conteúdo: psum. Tentava de tudo para corrigir esse bug, nem um simples overflow:hidden dava conta do recado, até que encontrei a solução. Se alguém estiver com esse problema, basta incluir um comentário após a última palavra onde os caracteres se repetem:
<div id="bug">Lorem Ipsum <!-- fix bug --></div>
Abaixo algumas camisetas interessantes com estampas sobre CSS:
Vi aqui: 9 Awesome CSS Themed T-Shirts
Em um post anterior, eu citei as 3 formas mais conhecidas e utilizadas de se inserir CSS em uma página, mas ficou faltando uma, não muito utilizada pela trupe de desenvolvedores, seja por falta de conhecimento ou gosto, mas isso agora não vem ao caso. Para inserir uma folha de estilos via @import em uma página é muito simples, basta você utilizar o seguinte código e colocá-lo no header de sua página:
<style type="text/css">
@import url("style.css");
</style>
Da forma como foi descrito acima, seu CSS funciona-rá em todos os browsers, dessa outra forma também é válida:
<style type="text/css">
@import url(style.css);
</style>
Mas, se você inserir dessa forma, por exemplo:
<style type="text/css">
@import url("style.css") all;
</style>
Ela funcionará em todos os browsers, menos nos IE’s do Windows. Se você quer saber mais sobre esses truques, é bom dar uma olhada nas referências abaixo:
Até hoje não vi uma referência concreta sobre ordem de declaração de propriedades em css, mas toda regra de boas maneiras hoje em dia é válida, e dessa vez achei uma referência interessante que estarei compartilhando aqui com vocês, onde se supõe que a melhor forma de declarar as proriedades seria assim:
Se você tem alguma outra ordem que gosta de seguir, mostre aí nos comentários.
Esse post visa atingir quem está iniciando em CSS e não sabe as formas possíveis de inserí-los em uma página.
Quem está iniciando no mundo dos WebStandards, mais precisamente em CSS, muitas vezes acaba se perdendo e não sabe da existência das 3 formas possíveis de se inserir CSS em uma página, algumas vezes por culpa do próprio desenvolvedor, que não tem interesse em buscar aprendizado, ou por culpa de algum editor WYSIWYG, e é aí onde os maiores problemas acontecem, pois o desenvolvedor perde o contato com o código e acaba virando desenvolvedor de um editor só.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<title>Seu título</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<p style="color:#B000FF;">CSS dentro das tags HTML</p>
</body>
</html>
Essa forma não é recomendada pois alí você está misturando a camada de conteúdo(HTML), com a camada de apresentação(CSS). Utilize somente em casos de extrema necessidade, ou somente para efetuar testes.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<title>Seu título</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
.texto {color:#B000FF;}
</style>
</head>
<body>
<p class="texto">Estilo chamado através do head da página</p>
</body>
</html>
Nessa 2ª forma, utilizamos de classes ou ids para dar estilo a nossa página, inserindo o CSS denro do Head de nossa página.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”pt-br” lang=”pt-br”>
<head>
<title>Seu título</title>
<meta http-equiv=”content-type” content=”text/html;charset=utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”estilo.css” />
</head>
<body>
<p class=”texto”>Estilo chamado através do head da página</p>
</body>
</html>
Essa é a forma mais recomendada, pois o nosso CSS fica em um arquivo externo, e as camadas ficam todas separadas, e também temos a vantagem de que se precisarmos efeuar alguma manutenção no CSS, não precisaremos tocar no HTML.
