Arquivo da categoria: HTML5

-Prefix-my-css

Tem certo momentos na criação de CSS, deparamos que alguns parâmetros que colocamos, que mesmo sendo comum, algum navegador não vai reconhecer (que muitas vezes o Internet Explorer não entende :p ).

Pesquisando encontrei esse site: prefixmycss.com.

Esse site pega todos os parâmetros que você criou e acrescenta outros com a mesma funcionalidade, para funcionar em todos os navegadores, ele vem com a possibilidade de deixar o CSS todo em uma linha só, deixando a leitura mais rápida na hora de carregar o site.

Para ele fazer esse melhoramento, é só pegar o seu código de CSS e colocar no campo “Paste you CSS” e clicar em “Prefix!”.

Qualquer dúvida deixe seu comentário.

Abraço a todos. =)

Como configurar Serviço PageSpeed ​​do Google em seu site

Para deixar sites mais rápida, o Google lançou várias diretrizes e ferramentas que permitem otimizar seu site para carregar mais rápido. Se você seguiu todos os passos, como a criação de CDN, minifying CSS e javascripts etc, e achar que seu site ainda não carrega tão rápido quanto você queria, então é melhor para você é configurar Serviço PageSpeed ​​do Google e deixar o Google otimizar o seu site.

Como mexer no PageSpeed?

O conceito por trás do serviço PageSpeed ​​é simples. Depois que você configurá-lo, o Google vai pegar uma cópia do seu site, otimizá-lo e armazená-lo em seu servidor. Quando um pedido é feito em seu site, a versão otimizada e cache do servidor do Google são servidos no lugar da cópia a partir do seu próprio servidor. Continue lendo Como configurar Serviço PageSpeed ​​do Google em seu site

CSS para Placeholder HTML5

Sempre gostaria de saber como alterar o estilos de um campo, achei alguns códigos que me ajudaram a tirar as dúvidas que tinha, que esse código tirem a suas dúvidas também. =)

Os exemplos abaixo mostra tipos de CSS específicos para cada navegador, Chrome, Mozilla, Internet Explorer e entre outros.


<code>/* all */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }</code>

Esses parâmetros são básico mas muito útil para personalizar campos.

Tags HTML5 para IE8

Como sempre, o IE é muito atrás em tecnologia. Este artigo explica como obter suas tags HTML5 trabalhando como se estivessem em Opera, Safari, Chrome ou Firefox.

Você pode obter etiquetas HTML5 trabalho no IE7 e IE8, incluindo este JavaScript na cabeça do seu documento. Para preformance incluí-lo depois de carregar o CSS.

<!--[if lt IE 9]>
 <script>
 document.createElement('header');
 document.createElement('nav');
 document.createElement('section');
 document.createElement('article');
 document.createElement('aside');
 document.createElement('footer');
 document.createElement('hgroup');
 </script>
 <![endif]-->

 

Firefox, Opera, Chrome, todos consegue reconhecer, mas o IE8 e as versões anteriores, não. Certifique-se de declarar qualquer novo elemento HTML5 como block em seu arquivo css, ou declarar in-line para todos os navegadores, pra não ter conflito futuro.

header,nav,section,article,aside,footer,hgroup { display: block; }

Se preferir, você pode puxar um mais elaborado html shiv do Google Code assim:

<!-- Pulled from http://code.google.com/p/html5shiv/ -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Fonte: http://www.nickyeoman.com/blog/html/118-html5-tags-in-ie8

 

Estrutura do HTML5

Olá pessoal,

Resolvi escrever sobre
o HTML5, a nova versão do HTML que promete revolucionar a
navegabilidade na web. O HTML passou vários anos sem atualizações,
o que é mortal para uma tecnologia em tempos de internet.
Finalmente, ele se renova e abre horizontes para navegadores modernos
e recursos multimídia. Continue lendo Estrutura do HTML5