Acid Test - Testando a eficiência dos Web Browsers

Tags: , , , , — March 11, 2008 @ 4:48 pm

Nós, desenvolvedores e designers web, muitas vezes praguejamos contra certos navegadores web (alguém aí disse ie6?) por não exibirem corretamente nossas páginas, mas dificilmente pensamos no outro lado. A vida também não é muito fácil para quem desenvolve esses navegadores.

O AcidTests trata-se de um projeto do webstandards.org para testar o comportamento e eficiência dos navegadores frente aos padrões web.

O primeiro Acid (Acid1) testava os navegadores quanto a apresentação e exibição de páginas HTML 4.0 e CSS 1, o Acid2, criado em 2005, queria fazer os navegadores “sorrirem” testando as capacidades deste de exibirem imagens PNG e CSS2.

Agora, o Acid3 vai além, exigindo dos navegadores renderização de imagens SVG animadas e Javascript.

Eis a lista de especificações testadas:

  • DOM2 Core
  • DOM2 Events
  • DOM2 HTML
  • DOM2 Range
  • DOM2 Style (getComputedStyle, …)
  • DOM2 Traversal (NodeIterator, TreeWalker)
  • DOM2 Views (defaultView)
  • ECMAScript
  • HTML4 (<object>, <iframe>, …)
  • HTTP (Content-Type, 404, …)
  • Media Queries
  • Selectors (:lang, :nth-child(), combinators, dynamic changes, …)
  • XHTML 1.0
  • CSS2 (@font-face)
  • CSS2.1 (’inline-block’, ‘pre-wrap’, parsing…)
  • CSS3 Color (rgba(), hsla(), …)
  • CSS3 UI (’cursor’)
  • data: URIs
  • SVG (SVG Animation, SVG Fonts, …)

Segundo o desenvolvedor Ian Hickson, a internet não se resume mais a apenas designs HTML/CSS, assim é importante testar também as capacidades dos navegadores de DOM e Javascript.

O autor do Site DrunkenFist.Com fez uma série de teste e divulgou os resultados. Vou postá-los aqui tb:

Fontes: http://info.abril.com.br/blog/juliano/20080306_listar.shtml, http://www.drunkenfist.com/304/2008/03/04/acid3-test-released-
i-took-some-screen-captures-lots-of-fail/, http://www.webstandards.org/action/acid3/

Se você gostou deste artigo, inscreva-se em meu RSS feed!

Ajuda de Contexto com CSS

Tags: , , — August 13, 2007 @ 1:52 pm

Quando construímos sistemas ou administração de sites é muito útil adicionar ajuda de contexto em alguns items (ao passar o mouse sobre um item um pequeno texto explicativo é exibido), mais ou menos assim:

Link com ajudaA ajuda de contexto vai aqui,
aparecendo somente quando o
usuário passa o mouse sobre o link

Existem várias bibliotecas JavaScript para utilizar este efeito, como a Overlib e também script.aculo.us, que tem um efeito parecido. Utilizando Js você tem efeitos mais interessantes, com a ajuda seguindo o mouse, etc, mas se precisar apenas de uma ajuda de contexto simples e leve, podemos fazê-lo apenas com CSS.

O conteito é bem simples…
Crie uma âncora <a>, com um span <span> dentro dela, que não é exibido (display:none), no estado Hover da âncora, o <span> terá ‘display:block’.

Como “um código vale mais que mil palavras”, aqui vai um exemplo:

/* Este é o estilo da âncora e span para o efeito */
 
a.help
{
    text-decoration:underline;
} 
 
a.help span
{
    position:absolute; /* para não alterar o
                         posicionamento da ancora */
    display:none;
} 
 
a.help:hover
{
    background-color:black; /* devido a um bug
                         no ie6 você deve alterar o
                         fundo (na verdade pode usar
                         a mesma cor, mas deve declará-la
                         aqui) do link ao passar o
                         mouse (???),
                         caso contrário o <span> não
                         aparecerá no ie6 */
} 
 
a.help:hover span
{
    display:block; /* por último, o <span>,
                        dentro do </span></span>,
                        fica com 'display:block' ao
                        passar do mouse */
 
     /* os demais estilos deste elemento não são
    necessários, apenas para melhorar o visual
    e você pode alterá-los a vontade*/
    margin-top: 0px;
    margin-left: 10px;
    border:1px solid white;
    background-color:#ffa303;
    color:white;
    text-decoration:none;
    font-size:12px;
}

Após definir o estilo, o código HTML para usá-lo é ainda mais simples:

<a href="#" class="help">
    Link com ajuda
    <span>
        A ajuda de contexto vai aqui,
 
        aparecendo somente quando o
 
        usuário passa o mouse sobre o link
    </span>
</a>

Se você gostou deste artigo, inscreva-se em meu RSS feed!