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

    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

    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

    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

    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

    localStorage: Armazenando dados com JavaScript

    Esse post é um dos posts mais visualizados do blog, foi criado em 2013, mas vou dar uma atualizada no que aconteceu de lá para cá. Armazenamento local com localStorage é umas das features mais úteis do HTML5 podemos utilizar para uma infinidade de ações agora com Progressive Web Apps esse recurso voltou a ficar…

  • 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

    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.