Disponibilizando seu site como opção de busca no Firefox e Internet Explorer 7

21/03/07

Para adicionar seu site como opção de busca no Firefox ou Internet Explorer 7 (IE7), você pode utilizar o padrão Open Search.

Primeiro, crie um arquivo XML com o seguinte conteúdo:

<?xml version="1.0"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
 <ShortName>Sounds Like</ShortName>
 <Description>Sounds Like Search - Type a band or artist to find albums and related artists</Description>
 <InputEncoding>UTF-8</InputEncoding>
 <Image height="16" width="16" type="image/x-icon">http://soundslikenow.org/favicon.ico</Image>
 <Url type="text/html" method="get" template="http://soundslikenow.org/search?name={searchTerms}&amp;source={referrer:source?}" />
</OpenSearchDescription>

Não se esqueça de trocar as informações acima com os dados do seu próprio site, claro! Como eles são auto-descritivos, não vou explicar um a um.

Depois, a única coisa que você precisa fazer é adicionar uma tag link ao seu site. Ela deve ter o seguinte formato:

<link rel="search" type="application/opensearchdescription+xml" title="Sounds Like" href="http://soundslikenow.org/search.xml" />

O valor do atributo href deve apontar para o arquivo XML criado anteriormente. Quando um usuário acessar o seu site, ele poderá adicionar o seu mecanismo de busca. Veja como fica:

Mecanismo de busca no Firefox

Mecanismo de busca no IE7

Para ver como funciona, acesse o Sounds Like.

Image Replacement em elementos input

11/02/07

Neste post, expliquei como eu estava querendo aplicar um fundo a elemento button. Eu e o Rapha aqui do UOL descobrimos ontem uma maneira de fazer isso no elemento input.

Olha que fácil. No markup:

<input type="button" value="Um botão" />

E o CSS:

input {
    border: none;
    background: url(http://m.simplesideias.com.br/document-save-as.png) no-repeat;
    content: ""; /* opera */
    display: inline-block; /* opera */
    height: 32px;
    line-height: 0; /* ie */
    text-indent: -9999px;
    width: 32px;
}

O melhor de tudo é que funciona até no Opera, coisa que não tinha conseguido fazer antes! ;)

Veja o resultado nos navegadores IE6 Standalone, IE7, Firefox 2 e Opera 9:

Técnica aplicada no IE6   Técnica aplicada no IE7

Técnica aplicada no Firefox 2   Técnica aplicada no Opera 9

IE Sucks! Mas isso você já sabia…

25/01/07

O Internet Explorer não presta, mas se você trabalha com CSS, você já sabia. ;)