Como construir melhor UX com atributos de dados HTML5 *
Você já quis adicionar dados personalizados a um elemento HTML específico para depois acessá-lo com JavaScript? Antes do surgimento do HTML5 no mercado, armazenar dados personalizados associados ao DOM era um problema, e os desenvolvedores precisavam usar todos os tipos de hacks desagradáveis, como a introdução de atributos não padrão ou o uso do obsoleto método setUserData () para solucionar o problema.
Felizmente, você não precisa mais fazê-lo, pois o HTML5 introduziu novos recursos globais dados-* atributos que tornam possível incorporar informações extras em quaisquer elementos HTML. O novo dados-* atributos tornar o HTML mais extensível, assim sendo permitir que você crie aplicativos mais complexos, e criar uma experiência de usuário mais sofisticada sem precisar usar técnicas intensivas de recursos, como chamadas Ajax ou consultas de banco de dados do lado do servidor.
O suporte ao navegador dos novos atributos globais é relativamente bom, pois eles são suportados por todos os navegadores modernos (o IE8-10 os suporta parcialmente).
Sintaxe do dados-* Atributos
A sintaxe do novo dados-* atributos é semelhante ao dos atributos prefixados por aria. Você pode inserir qualquer sequência de letras minúsculas no lugar do * placa. Você também precisa atribuir um valor a cada atributo na forma de uma string.
Digamos que você queira criar um Sobre nós página e armazene o nome do departamento onde cada funcionário trabalha. Você não precisa fazer mais nada além de adicionar o departamento de dados atributo personalizado para o elemento HTML apropriado da seguinte maneira:
- John Doe
- Jane Doe
personalizadas dados-* atributos são globais, assim como o classe e identidade atributos, para que você possa usá-los em todos os elementos HTML. Você também pode adicionar quantas dados-* atributos para uma tag HTML como você deseja. No exemplo acima, por exemplo, você pode introduzir um novo atributo personalizado chamado usuário de dados para armazenar nomes de usuários.
- John Doe
- Jane Doe
Como regra geral, se você quiser adicionar seu próprio atributo personalizado a um elemento HTML, você sempre terá que prefixar dados- corda. Da mesma forma, quando você vê um atributo prefixado por dados no código de outra pessoa, pode saber com certeza que é um atributo personalizado introduzido pelo autor.
Quando usar e quando não usar atributos personalizados
W3C define custom dados-* atributos como:
“Atributos de dados personalizados são destinados a armazenar dados personalizados privados para a página ou aplicativo, para os quais não há atributos ou elementos mais apropriados.”
Vale a pena considerar o uso dados-* atributos quando você não consegue encontrar nenhum outro atributo semântico para os dados que você quer armazenar.
Não é a melhor idéia usá-los apenas para fins de estilo, pois para isso você pode escolher entre classe e a estilo atributos. Se você quiser armazenar um tipo de dados para o qual o HTML5 tenha um atributo semântico, como o data hora atributo para o elemento, use isso em vez do atributo data-prefixed.
É importante notar que dados-* atributos retêm dados que privada para a página ou a aplicação, o que significa que eles serão ignorados pelos agentes do usuário, como robôs do mecanismo de pesquisa e aplicativos externos. Atributos com prefixo de dados podem ser acessados somente pelo código em execução no site que hospeda o HTML.
personalizadas dados-* Os atributos são extensivamente usados por estruturas frontend, como Bootstrap e Zurb Foundation. A boa notícia é que você não precisa necessariamente saber como escrever JavaScript se quiser usar atributos com prefixo de dados como parte de uma estrutura, pois só é necessário adicioná-los ao código HTML para acionar uma funcionalidade de um plugin JavaScript pré-escrito.
O trecho de código abaixo adiciona uma dica de ferramenta à esquerda para um botão no Bootstrap, fazendo uso do alternar dados e a colocação de dados atributos personalizados e atribuindo valores apropriados a eles.
Alvo dados-* Atributos com CSS
Embora não seja recomendado o uso dados-* atributos apenas para fins de estilo, você pode selecionar os elementos HTML a que pertencem com a ajuda de seletores gerais de atributos. Se você quiser selecionar cada elemento que tenha um determinado atributo prefixado por dados, use esta sintaxe no seu CSS:
li [usuário de dados] cor: azul;
Observe que não são os nomes de usuários que serão exibidos em azul no snippet de código acima - depois que todos os dados armazenados nos atributos personalizados não estiverem visíveis -, mas os nomes dos funcionários contidos no elementos (no exemplo “John Doe” e “Jane Doe”).
Se você quiser apenas selecionar elementos nos quais um atributo com prefixo de dados usa um determinado valor, essa é a sintaxe a ser usada:
li [data-departamento = "TI"] borda: azul sólido 1px;
Você pode usar todos os seletores de atributos de CSS mais complicados, como o seletor combinador de irmãos em geral ([data-value ~ = "foo"]) ou o seletor de curinga ([data-value * = "foo"]), com atributos prefixados por dados.
Acesso dados-* Atributos com JavaScript
Você pode acessar os dados armazenados no dados-* atributos com JavaScript usando a propriedade dataset ou jQuery dados() método.
Baunilha JavaScript
o conjunto de dados propriedade é a propriedade do HTMLElement interface, isso significa que você pode usá-lo em qualquer tag HTML. o conjunto de dados propriedade dá acesso a todos os costume dados-* atributos do elemento HTML fornecido. Os atributos são retornados como DOMStringMap objeto que contém uma entrada para cada dados-* atributo.
Na nossa Sobre nós exemplo de página, você pode verificar facilmente os atributos personalizados “Jane Doe” tem usando o conjunto de dados propriedade da seguinte maneira:
var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap user: "janedoe", departamento: "IT" Você pode ver que no retorno DOMStringMap opor o dados- prefixos são removidos dos nomes dos atributos (do utilizador ao invés de usuário de dados, e departamento ao invés de departamento de dados). Você precisa usar os atributos no mesmo formato se desejar acessar apenas o valor de um determinado atributo prefixado por dados (em vez da lista de todos os atributos personalizados, como no snippet de código acima).
Você pode recuperar o valor de um determinado dados-* atributo como uma propriedade do conjunto de dados propriedade. Como mencionei antes, você precisa omitir o dados- prefixo do nome da propriedade, por isso, se você quiser acessar o valor de Jane usuário de dados atributo, você pode fazer assim:
var jane = document.getElementById ("jane"); console.log (jane.dataset.user) // janedoe jQuery's dados() método
o dados() O método jQuery possibilita obter o valor de um atributo prefixado por dados. Aqui você também tem que omitir o dados- prefixo do nome do atributo para acessá-lo corretamente. Em nosso exemplo, você pode exibir uma mensagem de alerta com o nome do departamento onde “Jane” trabalha com o seguinte código:
$ ("# jane"). hover (function () var departamento = $ ("# jane"). data ("departamento"); alerta (departamento);); o dados() O método precisa ser usado com cuidado, pois ele não age apenas como um meio de obter o valor de um atributo prefixado por dados, mas também para anexar dados a um elemento DOM da seguinte maneira:
var town = $ ("# jane"). data ("cidade", "Nova Iorque"); Os dados extras que você anexa ao jQuery dados() obviamente, o método não aparecerá no código HTML como um novo dados-* atributo, portanto, se as duas técnicas forem usadas ao mesmo tempo, o elemento HTML fornecido armazenará dois conjuntos de dados, um com HTML e outro com jQuery.
No nosso exemplo “Jane” tem novos dados personalizados ("Cidade") com jQuery, mas esse novo par de valores-chave não aparecerá em HTML como um novo data-town atributo. Armazenar dados de duas maneiras diferentes não é a melhor prática para dizer o mínimo, então use apenas um dos dois métodos de uma só vez.
Acessibilidade e dados-* Atributos
Como os dados mantidos em personalizado dados-* os atributos são privados, as tecnologias de assistência podem não conseguir acessá-los. Se você deseja manter seu conteúdo acessível para usuários com deficiências, não é recomendável armazenar conteúdo que possa ser importante para os usuários dessa maneira..
