Categoria: HTML5
-
Introdução a nova API de popover
Popovers estão por toda parte na web, eu particularmente trabalho bastante com popovers, especialmente no formato de tooltips e até hoje a implementação deste recurso necessitava de JavaScript. Mas com a nova API de popover conseguimos fazer a implementação deste recurso com apenas HTML e CSS. Além de tooltips os elementos popovers podem ser usados…
-
Elemento HTML Dialog
Já pensou em utilizar um elemento HTML Dialog para adicionar uma caixa de diálogo sem javascript? Em outras palavras um pop-up totalmente acessível sem nenhum javascript.
-
Use o Input type apropriado para cada tipo de dado
Com o HTML5 foram introduzidos as novas categorias de input type, isso representou um ganho enorme para a experiência de usuários mobile que utilizam formulários na sua aplicação e site, utilizar o input type correto é muito importante para acessibilidade e experiência do usuário. Eles podem melhorar a experiência do usuário especialmente quando o usuário…
-
Trabalhando com a propriedade CSS currentColor
Nesse post falaremos sobre CSS currentColor, ele já está aí a um bom tempo e ela pode ser bem útil para melhorar o nosso código CSS e nesse tutorial veremos como. Muitas vezes queremos efetuar uma referência a cor atual do nosso elemento, algo como a palavra-chave this, comum nas linguagens de programação. No CSS…
-
Trabalhando com Fetch API e XMLHttpRequest
Nesse post vamos trabalhar com duas opções para realizar requisições Assíncrona a dados no servidor XMLHttpRequest e Fetch API. Com a popularização do jQuery por muito tempo utilizamos a biblioteca para fazer requisições AJAX pela facilidade, melhorias com recursos extras e o suporte aos browsers antigos.
-
Introdução a imagens responsivas com srcset
Imagens são responsáveis pela maior parte do carregamento de bytes de uma aplicação web em geral. Não podemos evitar-las, pois imagens são um ponto crucial da nossa aplicação. Mas temos alternativas para reduzir esse impacto com imagens responsivas. O que são imagens responsivas? Imagine o seguinte cenário, no seu website você possui uma imagem de…
-
localStorage: Armazenando dados com JavaScript
Esse post é um dos posts mais visualizados do blog, foi criado em 2013, mas darei uma atualizada no que aconteceu de lá para cá. Armazenamento local com localStorage é umas dos recursos mais úteis do HTML5, podemos utilizar para uma infinidade de ações, agora com Progressive Web Apps esse recurso voltou a ficar evidência.…
-
Observe a orientação do device com JavaScript
Com JavaScript podemos observar a orientação do device, também é possível realizar este tratamento com CSS, mas isso fica restrito a questões visuais, caso queria realizar algum tratamento lógico na nossa aplicação podemos utilizar JavaScript. Como acompanhar a orientação do device com javascript? Temos “N” possibilidades de acompanhar a orientação do device com JavaScript, nesse…
-
Limites do LocalStorage
Sempre quando falo de localStorage as pessoas perguntam-me: “Qual são os limites do LocalStorage?” sempre respondia o valor padrão de 5 MB. O que é localStorage? A propriedade localStorage permite acessar um objeto Storage local e armazenar dados no navegador do usuário. É um recurso de fácil implementação, mas tem alguns problemas de performance por conta da sua escrita…
-
Crie accordion sem JavaScript
A tag HTML details nos permite criar um accordion sem JavaScript e nesse poste você ver como usa-la, ela pode ser útil para obter informações adicionais sobre uma determinada informação, resumindo um accordion.
