Parte 1/5

Parte 2/5

Parte 3/5

Parte 4/5

Parte 5/5

Isso pode lhe interessar:

• A Guerra dos Browsers

A Discovery Channel produziu um documentário onde você pode ver toda essa história a fundo, se você perdeu na TV, pode estar vendo aqui nesse vídeo que irei mostrar o início da guerra dos browsers e mais algumas coisas do tipo: O primeiro browser gráfico criado para a web, como a Netscape ficou rica da noite pro dia, por que os desenvolvedores do Internet Explorer jogaram um “e” de 3 metros de altura em frente ao escritório da Netscape. Você verá tudo isso e mais algumas coisas muito interessantes nesse vídeo:

Na imagem abaixo você pode ver um gráfico da evolução da Guerra dos Browsers:

Isso pode lhe interessar:

• Microsoft interessada em usar Webkit
• Descobri como o Internet Explorer 8 passou no Acid2 Test
• Dia Mundial sem o Internet Explorer
• Internet Explorer 6 R.I.P
• Internet Explorer 8 e o modo Super Standard

• Transcending CSS
• Semântica
• Microformats
• Seletores avançados de CSS
• Técnicas de layout com CSS
• Tipografia
• CSS3

CSS Artistry: A Web Design Master Class

Abaixo uma prévia do que é encontrado no DVD:

Via Aprendiendo Web

Isso pode lhe interessar:

• Seletores CSS com jQuery
• 10 Técnicas para Reset CSS
• Peppy - Seletor JavaScript CSS3 mais rápido da Web
• Cross-Browser CSS Drop-Down Menu Framework
• Design view do Dreamweaver não é browser

Elemento: foo

Todos os elementos que são do tipo foo. Exemplo:

$("div")

Seleciona todas as divs do documento HTML.

ID: #meuid

O elemento cujo o ID seja igual a #meuid. Exemplo:

$("#meuid")

Lembrem-se que os IDs nas páginas devem ser únicos, caso sejam repetidos, ele só irá pegar o primeiro elemento na página com ID citado.

Class: .minhaclasse

Seleciona todos os elementos que tenham a classe “minhaclasse”. Exemplo:

$(".minhaclasse") //Todos os elementos com a classe .minhaclasse
$("p.minhaclasse") //Todas as tags p com a classe .minhaclasse
$("div.minhaclasse") //Todas as divs com a classe .minhaclasse

Descendentes: E F

Seleciona todos os elementos coincidentes com F que sejam descendentes de E. Exemplo:

$("#container p") //Seleciona todos os elementos p que sejam descendentes de um elemento cujo o id seja #container

Filhos diretos: E > F

Seleciona todos os elementos coincidentes com F que sejam filhos diretos de E. Exemplo:

$("#nav > li") //Seleciona todas as tags li's que sejam filhos diretos de um elemento com o id igual a #nav

Seletores irmão: E + F

Seleciona todos os elementos coincidentes com F que venham imediatamente depois de E. Exemplo:

$("label + input") //Seleciona todos os inputs que tiverem um label antes

Seletores irmão de combinação: E ~ F

Seleciona todos os elementos coincidentes com F que estão no mesmo nível e após E. Exemplo:

$("h2 ~ p") //Seleciona o elemento p que esteja no mesmo nível e após o h2

Pseudo seletores

:first

Seleciona apenas o primeiro li filho do elemento que contenha o id #nav:

$("#nav li:first")
$("#nav li:first-child") // Uma outra forma alternativa que também funciona

:last-child

Seleciona apenas o último li filho do elemento que contenha o id #nav:

$("#nav li:last")
$("#nav li:last-child") // Uma outra forma alternativa que também funciona

:odd

Seleciona todos os td’s que sejam pares na árvore do HTML:

$("td:odd")

:even

Seleciona todos os td’s que sejam ímpares na árvore do HTML:

$("td:even")

:text

Seleciona todos os inputs que sejam do tipo texto:

$(":text")

Ampliando os seletores

No guia ofcial do jQuery, você pode encontrar mais seletores do tipo:

css( name )

Devolve o valor do estilo de uma propriedade CSS para o primeiro elemento encontrado. Se atentem ao seguinte HTML:

<p style="font-weight: bold;">Texto de exemplo</p>

O JavaScript fica da seguinte forma:

$(document).ready(function() {
      var fonte = $("p").css("font-weight");
      alert(fonte);
});

Retorna um alert com o texto “bold”

css( properties )

Estabele propriedades específicadas a todos os elementos coincidentes. Útil quando devemos estabelecer várias propriedades:

<div>Texto de exemplo</div>

O JavaScript fica da seguinte forma:

$(document).ready(function() {
      $("div").css({ color: "#FFFFFF", background: "#000000" });
});

Aqui definimos que a cor do texto será branco e o fundo preto.

css( name, value )

Estabelece um valor a propriedade especificada em todos os elementos coincidentes. Muito semelhante a regra anterior, seu uso seria:

$(document).ready(function() {
      $("p").css("color","red");
});

height()

Obtém a altura em px do primeiro elemento coincidente:

$("#div1").height();

Nos retornaria a altura em px do elemento cujo id seja #div1.

width()

Obtém a largura em px do primeiro elemento coincidente:

$("#div1").width();

Nos retornaria a largura em px do elemento cujo id seja #div1.

Em um exemplo muito simples, vamos alterar a cor de fundo da página ao clicar em um elemento. Se atentem ao seguinte código:

<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("p").click(function () {
          alert("OK");
          $("body").css("background","red");
    });
});
</script>
</head>
<body>
    <p>Clique aqui para alterar o fundo da página</p>
</body>
</html>

Agora é só ver o exemplo funcionando.

Isso pode lhe interessar:

• Peppy - Seletor JavaScript CSS3 mais rápido da Web
• Máscaras em campos de formulários com jQuery
• jQuery fadeIn() & fadeOut() - Bug no Internet Explorer
• Long input helper com jQuery
• jQuery Plugin para Twitter

Para começar, caso não tenha o jQuery, faça o download do mesmo, após isso pegue o Masked Input, e apenas inclua-los em sua página.

Agora vamos criar as máscaras que precizamos.

jQuery.noConflict();
(function($) {
$(function() {
$('.mask-data').mask('99/99/9999'); //data
$('.mask-hora').mask('99:99'); //hora
$('.mask-fone').mask('(999) 999-9999'); //telefone
$('.mask-rg').mask('99.999.999-9'); //RG
$('.mask-ag').mask('9999-9'); //Agência
$('.mask-ag').mask('9.999-9'); //Conta
});
})(jQuery);

Repare que estou setando as máscaras para “classes”, no site do autor é usado “ids”, mas isso não é muito legal, caso tenha dois campos de telefone numa mesma página, teriamos que mecher no javascript, pois não pode haver “id” repetidos na mesma página.

Agora pra implemetar as máscaras é só incluir as classes setadas nos inputs dos formulários.

<input type="text" name="fone1" class="mask-fone" />
<input type="text" name="fone2" class="mask-fone" />
<input type="text" name="rg" class="mask-rg" />
<input type="text" name="cpf" class="mask-fpc" />

E pronto, já esta funcionando, repare que caso você erre, é possível alterar sem ter que apagar tudo, geralmente algumas máscaras, como a do Banco do Brasil, não deixa editar pelo meio do campo, temos que apagar e digitar tudo de novo, se não tudo que for digitado vai para o final do campo.

Para facilitar, recomendo colocar o código que gera as máscaras no final do código do plugin, sim no mesmo arquivo, assim você não precisa ficar refazendo, e é só incluir e usar.

Isso pode lhe interessar:

• Seletores CSS com jQuery
• jQuery fadeIn() & fadeOut() - Bug no Internet Explorer
• Long input helper com jQuery
• jQuery Plugin para Twitter
• Pegar Coordenadas do Mouse com jQuery

function juntaEnd(){
    var rua = document.getElementById('input_rua').value
    var num = document.getElementById('input_num').value
    var bairro = document.getElementById('input_bairro').value
    var cidade = document.getElementById('input_cidade').value
    var estado = document.getElementById('input_estado').value
    return rua+num+bairro+cidade+estado
}

Seria melhor você criar uma outra função e utilizar dessa forma:

function get(quem) { return document.getElementById(quem) }
function juntaEnd(){
	var rua = get('input_rua').value
	var num = get('input_num').value
	var bairro = get('input_bairro').value
	var cidade = get('input_cidade').value
	var estado = get('input_estado').value
	return rua+num+bairro+cidade+estado
}

Agora, semelhante aos Frameworks JavaScript:

function $(obj){
	return document.getElementById(obj);
}

Adaptado ao código do Micox, ficaria da seguinte forma:

function $(obj) { return document.getElementById(obj) }
function juntaEnd(){
	var rua = $('input_rua').value
	var num = $('input_num').value
	var bairro = $('input_bairro').value
	var cidade = $('input_cidade').value
	var estado = $('input_estado').value
	return rua+num+bairro+cidade+estado
}

Como podem ver, é uma boa economia de código.

Isso pode lhe interessar:

• Seletores CSS com jQuery
• Máscaras em campos de formulários com jQuery
• Peppy - Seletor JavaScript CSS3 mais rápido da Web
• jQuery fadeIn() & fadeOut() - Bug no Internet Explorer
• Long input helper com jQuery

Começo então o primeiro dos meus posts com um desabafo.

Estava desenvolvendo um dos meus projetos, e tudo funcionava corretamente, até que me dei conta que ainda não havia testado no famigerado Internet Explorer 6. Instalei o MultipleIES e resolvi fazer o teste em busca de “possíveis” problemas de compatibilidade.
Como não era de se duvidar, vários problemas apareceram. Coisas como margens misteriosas ao definir um display: block para a tag <li>.

É um absurdo que mais de dois anos após o lançamento do IE 7, o número de usuários que ainda usam o IE 6 seja tão grande.

E de quem é a culpa? Da Microsoft? Dos próprios usuários? Dos desenvolvedores? Nesse caso, acho que todos têm a sua parcela de culpa. A Microsoft, por não incentivar a atualização do IE 6. Talvez seria interessante até que fosse da maneira que a Mozilla fez com a atualização do Firefox 2 para o Firefox 3, meio que “forçada”. Os usuários, por terem a mentalidade de que “se está funcionando assim, então pra que mudar”. E os desenvolvedores, por não se manifestarem quanto a isso tudo, desenvolvendo sites que incentivem essa atualização.

E enquanto isso não mudar, de nada vai adiantar estudar Web Standards, CSS 2.1 e 3, se na hora de desenvolver de verdade, tudo vai precisar ser nivelado por baixo, para funcionar no IE 6. E com isso, nós continuaremos a desenvolver sites cheios de hacks, comentários condicionais e códigos ninja que façam com que o site funcione bem para todo mundo…

Se tiver um tempo, leiam também:

• PLUG-IN DE ESTATÍSTICAS PARA O WORDPRESS: FIRESTATS
• GUIA CSS - 10ª PARTE: PROPRIEDADE FONT EM CSS
• A Guerra dos Browsers
• Vídeos do Youtube com recurso de Closed Caption
• IBSN: INTERNET BLOG SERIAL NUMBER

| View | Upload your own

Caso você não tenha interesse em estar vendo os Slides, você tem a opção de baixar uma versão em PDF. Via Leandono’s Blog.

Isso pode lhe interessar:

• Stencils para Omnigraffle
• Yahoo! Design Stencil Kit
• Criando Protótipos com o PowerPoint
• Como se faz um site?
• Palestra gratuita sobre Arquitetura de Informação

1. Amadeus

Download

2. Fivestar

Download

3. Fivestar Blue

Download

4. Fivestar Red

Download

5. Fresh Theme

Download

6. Sixpence

Download

Se estiver interessado em conhecer mais temas para o Expression Engine, basta visitar o site do desenvolvedor.

Isso pode lhe interessar:

• 38 Alternativas ao Wordpress

Para evitar esse tipo de problema, é aconselhável utilizar técnicas de CSS Reset, ou seja, inciar o CSS com todos as tags HTML sem qualquer estilo padrão definido pelo browser. Abaixo vou mostrar algumas técnicas, algumas desconhecias por alguns, outras já utilizadas por default por vários desenvolvedores.

1. Generic Reset CSS

Esse com certeza é o mais conhecido e utilizado pelos desenvolvedores:

* {
    padding: 0;
    margin: 0;
    border: 0;
}

2. Ateneu Popular CSS Reset

CSS inicial sugerido pelo site Ateneu Popular:

html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt,
var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus { outline: 0;}
a, a:link, a:visited, a:hover, a:active{text-decoration:none}
table {	border-collapse: separate;border-spacing: 0;}
th, td {text-align: left; font-weight: normal;}
img, iframe {border: none; text-decoration:none;}
ol, ul {list-style: none;}
input, textarea, select, button {font-size: 100%;font-family: inherit;}
select {margin: inherit;}
hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}

3. Chris Poteet’s Reset CSS

Técnica sugerida por Chris Poteet’s para Reset CSS:

* {
    vertical-align: baseline;
    font-family: inherit;
    font-style: inherit;
    font-size: 100%;
    border: none;
    padding: 0;
    margin: 0;
}
body {
    padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
    margin: 20px 0;
}
li, dd, blockquote {
    margin-left: 40px;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

4. Yahoo’s CSS Reset

Técnica de Reset CSS proposta pelo Yahoo:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
ol,ul {
    list-style: none;
}
caption,th {
    text-align: left;
}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border: 0;
}

5. Eric Meyer Reset CSS

Esse com certeza deve ser o mais utilizado entre os desenvolvedores, proposto por Eric Meyer, é o que eu utilizo atualmente:

html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
    vertical-align: baseline;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    outline: 0;
    padding: 0;
    margin: 0;
    border: 0;
}
:focus {
    outline: 0;
}
body {
    background: white;
    line-height: 1;
    color: black;
}
ol, ul {
    list-style: none;
}
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    font-weight: normal;
    text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

6. Tantek Celik Reset CSS

Técnica de Reset CSS proposta por Tantek Celik:

:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }

7. Christian Montoya Reset CSS

Técnica sugeria por Christian Montoya:

html, body, form, fieldset {
    margin: 0;
    padding: 0;
    font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
    margin: 1em 0;
    padding: 0;
}
li, dd, blockquote {
    margin-left: 1em;
}
form label {
    cursor: pointer;
}
fieldset {
    border: none;
}
input, select, textarea {
    font-size: 100%;
    font-family: inherit;
}

8. Rudeworks Reset CSS

Técinca de Reset CSS proposta por Rudeworks:

* {
    margin: 0;
    padding: 0;
    border: none;
}
html {
    font: 62.5% "Lucida Grande", Lucida, Verdana, sans-serif;
    text-shadow: #000 0px 0px 0px;
}
ul {
    list-style: none;
    list-style-type: none;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
    font-weight: normal;
    margin: 0 0 1em 0;
}
cite, em, dfn {
    font-style: italic;
}
sup {
    position: relative;
    bottom: 0.3em;
    vertical-align: baseline;
}
sub {
    position: relative;
    bottom: -0.2em;
    vertical-align: baseline;
}
li, dd, blockquote {
    margin-left: 1em;
}
code, kbd, samp, pre, tt, var, input[type=‘text’], textarea {
    font-size: 100%;
    font-family: monaco, "Lucida Console", courier, mono-space;
}
del {
    text-decoration: line-through;
}
ins, dfn {
    border-bottom: 1px solid #ccc;
}
small, sup, sub {
    font-size: 85%;
}
abbr, acronym {
    text-transform: uppercase;
    font-size: 85%;
    letter-spacing: .1em;
    border-bottom-style: dotted;
    border-bottom-width: 1px;
}
a abbr, a acronym {
    border: none;
}
sup {
    vertical-align: super;
}
sub {
    vertical-align: sub;
}
h1 {
    font-size: 2em;
}
h2 {
    font-size: 1.8em;
}
h3 {
    font-size: 1.6em;
}
h4 {
    font-size: 1.4em;
}
h5 {
    font-size: 1.2em;
}
h6 {
    font-size: 1em;
}
a, a:link, a:visited, a:hover, a:active {
    outline: 0;
    text-decoration: none;
}
a img {
    border: none;
    text-decoration: none;
}
img {
    border: none;
    text-decoration: none;
}
label, button {
    cursor: pointer;
}
input:focus, select:focus, textarea:focus {
    background-color: #FFF;
}
fieldset {
    border: none;
}
.clear {
    clear: both;
}
.float-left {
    float: left;
}
.float-right {
    float: right;
}
body {
    text-align: center;
}
#wrapper {
    margin: 0 auto;
    text-align: left;
}

9. Anieto2K Reset CSS

Técnica de Reset CSS proposta por Andrés Nieto:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img,
ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: normal;
    font-style: normal;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline
}
body {
    line-height: 1
}
:focus {
    outline: 0
}
ol, ul {
    list-style: none
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
blockquote:before, blockquote:after, q:before, q:after {
    content: ""
}
blockquote, q {
    quotes: "" ""
}
input, textarea {
    margin: 0;
    padding: 0
}
hr {
    margin: 0;
    padding: 0;
    border: 0;
    color: #000;
    background-color: #000;
    height: 1px
}

10. CSSLab CSS Reset

Técnica de CSS Reset proposta pelo site CSSLab:

html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
:focus {
    outline: 0;
}
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
a img, iframe {
    border: none;
}
ol, ul {
    list-style: none;
}
input, textarea, select, button {
    font-size: 100%;
    font-family: inherit;
}
select {
    margin: inherit;
}
/* Fixes incorrect placement of numbers in ol's in IE6/7 */
ol { margin-left:2em; }
/* == clearfix == */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

Se você costuma utilizar alguma técnica de Reset CSS que não foi listada aqui, ou criou alguma, liste-a nos comentários.

Isso pode lhe interessar:

• Inspired CSS - Aprenda CSS com Andy Clarke
• Seletores CSS com jQuery
• Peppy - Seletor JavaScript CSS3 mais rápido da Web
• Cross-Browser CSS Drop-Down Menu Framework
• Design view do Dreamweaver não é browser

O Inefável Steve Balmer tem se mostrado partidário em desenvolver um Browser de código aberto, isso mesmo, em uma conferência em Sydney, Balmer admitiu que existe a possibilidade de adotar o Webkit(Motor de Renderização do Safari e Google Chrome) para o navegador livre que a Microsoft desenvolveria.

Vejam um trecho de seu discurso:

O código aberto é interessante “, disse ele.” Apple tem utilizado Webkit e poderemos olhar para isso, mas nós vamos continuar a construir extensões para o IE 8.

Só tenho uma coisa a dizer: Balmer, deus lhe ouça. Veja mais sobre o assunto aqui.

Isso pode lhe interessar:

• A Guerra dos Browsers
• Descobri como o Internet Explorer 8 passou no Acid2 Test
• Dia Mundial sem o Internet Explorer
• Internet Explorer 6 R.I.P
• Internet Explorer 8 e o modo Super Standard

• &start=249 - Onde o valor é definido em segundos, portanto 249 são 4 minutos e 15 segundos, é a partir daí que nosso vídeo começa.
• &autoplay=1 - autoplay é obrigatório para iniciar o vídeo a partir do tempo pré-definido.

A Url do vídeo ficaria dessa forma:

http://www.youtube.com/v/bU282XY8bCU&start=249&autoplay=1

O código final fica da seguinte forma:

<object data="http://www.youtube.com/v/bU282XY8bCU&#038;start=249&#038;autoplay=1" type="application/x-shockwave-flash" width="425" height="350">
    <param name="quality" value="high" />
    <param name="movie" value="http://www.youtube.com/v/bU282XY8bCU&#038;start=249&#038;autoplay=1" />
</object>

Observem o código funcionando no vídeo abaixo:

Você também pode linkar para um minuto absoluto dentro de vídeos que estejam no domínio do youtube, basta passar o parâmetro: #t=XXmYYs na URL do vídeo. Nesse vídeo de exemplo, http://www.youtube.com/watch?v=TBNDYggyesc#t=24m30s, o vídeo inicia aos 24 minutos e 30 segundos.

Isso pode lhe interessar:

• Inserir vídeos do Youtube em XHTML válido

Nos testes executados, ele apresentou os seguintes resultados em relação os Frameworks mais conhecidos:

• 4x mais rápido no Firefox 3.
• 6x mais rápido no Firefox 2.
• 8x mais rápido no Internet Explorer 7.
• 3x mais rápido no Internet Explorer 6.
• 3x mais rápido no Opera 9.
• 4x mais rápido no Safari 3.

Referente a seu maior concorrente, Sizzle, ele apresentou os seguintes resultados:

• 1.2x mais rápido no Firefox 3.
• 1.3x mais rápido no Firefox 2.
• 11.1x mais rápido no Internet Explorer 7.
• 4.5x mais rápido no Internet Explorer 6.
• 0x mais rápido no Opera 9.
• 4x mais rápido no Safari 3.

Caso queira efetuar testes de velocidade com o Peppy em relação a outros Frameworks, é só dar uma olhada no Slickspeed, as velocidades podem variar de browser para browser.

Isso pode lhe interessar:

• Seletores CSS com jQuery
• CSS3 - Seletor :not()
• Zebra Tables com CSS3
• 72 ACRÔNIMOS QUE FALAM OS GEEKS
• CSS3 - A PSEUDO-CLASSE :not(x)

Já tive vários problemas desse tipo e até então não havia encontrado a solução, mas acabei encontrado uma solução muito interessante no site de Kevin Leary que consiste simplesmente em adicionar uma cor de fundo ao elemento que será aplicado o fade.

Acessem esse exemplo com o Internet Explorer e vejam o erro acontecer. Provavelmente esse erro acontece com outras bibliotecas JavaScript, portanto, fica aí a solução.

Isso pode lhe interessar:

• Seletores CSS com jQuery
• Máscaras em campos de formulários com jQuery
• Long input helper com jQuery
• jQuery Plugin para Twitter
• Pegar Coordenadas do Mouse com jQuery

O que devemos fazer em situações como essa? Arrancar os cabelos? Não se preocupe, vou mostrar aqui uma boa solução que encontrei no site Webtoolkit4.me, para aqueles campos de formulários onde eles são muito pequenos e o texto que você precisa digitar é muito grande (É o que mais acontece hoje em dia).

Observem a seguinte marcação HTML:

<form id="aform">
  <label for="type">Descrição longa:</label>
  <input name="type" type="text" id="type" size="20" />
  <div id="info"></div>
</form>

Como podem ver, um simples formulário com um campo label e um campo input, e uma div extra chamada info, onde sua função será de que ao digitar o texto no campo input e o mesmo o exceder, o texto irá aparecer por completo dentro dessa div info. Para fazer isso vamos utilizar a biblioteca jQuery:

$(document).ready(function(){
// Definimos aqui que por enquanto a div id="info" não deve aparecer.
$('#info').hide();
// Pegamos o tamanho do campo input texto
var size  =  $('#type').attr("size");
// Vamos fazer alguma coisa quando começar a digitar.
$('#type').keyup(
function(){
// Tudo que for digitado sera armazenado em uma variável
var entry = $(this).attr("value");
// O tamanho dela.
var current_length = $(this).attr("value").length;
// Se o nosso texto é maior que o campo input
// ele é mostrado na div id="info".
if (current_length>= size) {
$('#info').html("<strong>Você digitou até agora:</strong> " + entry);
$('#info').show('fast');
}
// Caso contrário ela fica oculta.
else $('#info').hide('fast');
});
});

Uma solução muito interessante, vejam o script em ação nesse exemplo.

Isso pode lhe interessar:

• Seletores CSS com jQuery
• Máscaras em campos de formulários com jQuery
• jQuery fadeIn() & fadeOut() - Bug no Internet Explorer
• jQuery Plugin para Twitter
• Pegar Coordenadas do Mouse com jQuery