Skip to main content

Tags

  • tags

Alt text

New Features​

Dialog​

<dialog id="dialog">
   I'm a pure HTML dialog!
</dialog>

Fetch priority​

  • Podemos fornecer uma dica de prioridade de download usando o fetchpriorityatributo HTML. Podemos usar o atributo com tags link, img, scripte iframe. O fetchpriorityatributo aceita um dos três valores:

    • high: o recurso é de alta prioridade e queremos que o navegador priorize seu download.

    • low: o recurso tem baixa prioridade e queremos que o navegador o despriorize.

    • auto: Valor padrão onde deixamos o navegador decidir a prioridade apropriada.

<img src="/images/not_important.png" fetchpriority="low" alt="Unimportant image!">

<link href="/js/script.js" fetchpriority="high">

Eyedropper​

const eyeDropper = new EyeDropper();
eyeDropper.open()
    .then((result) => {
        console.log(result.sRGBHex);
    });

Template​

  • A tag <template> no HTML é um mecanismo para manter o conteúdo do lado do cliente que você não quer ser renderizado quando a página é carregada. Em vez disso, você pode usar o conteúdo do <template> mais tarde durante a execução da página. Esse conteúdo pode ser clonado e inserido no documento conforme necessário via JavaScript.
<!DOCTYPE html>
<html>
<head>
    <title>Exemplo de Template</title>
</head>
<body>

<template id="exemplo-template">
    <div>
        <p>Texto de exemplo.</p>
    </div>
</template>

<button id="btn-adicionar">Adicionar Elemento</button>

<script>
    document.getElementById('btn-adicionar').onclick = function() {
        // Acessa o conteúdo do template
        var conteudo = document.getElementById('exemplo-template').content;

        // Clona o conteúdo do template
        var clone = document.importNode(conteudo, true);

        // Adiciona o clone ao body
        document.body.appendChild(clone);
    }
</script>

</body>
</html>

abbr​

<p>Using <abbr title="abc">HTML</abbr> is fun and easy!</p>
<!--vai aparecer um tooltip em cima do html-->
<menu>
    <li>Texto</li>
</menu>

HTML Dialog​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Dialog Example</title>
</head>
<body>
    <button id="showDialog">Show Dialog</button>
    <dialog id="myDialog">
        <p>This is a dialog box.</p>
        <button id="closeDialog">Close</button>
    </dialog>
    <script>
        const showDialog = document.getElementById('showDialog');
        const closeDialog = document.getElementById('closeDialog');
        const dialog = document.getElementById('myDialog');

        showDialog.addEventListener('click', () => {
            dialog.showModal();
        });

        closeDialog.addEventListener('click', () => {
            dialog.close();
        });
    </script>
</body>
</html>

HTML Popover API​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Popover API Example</title>
    <style>
        .popover {
            display: none;
            position: absolute;
            border: 1px solid #ccc;
            background-color: #fff;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <button id="showPopover">Show Popover</button>
    <div id="popover" class="popover">
        <p>This is a popover.</p>
        <button id="closePopover">Close</button>
    </div>
    <script>
        const showPopover = document.getElementById('showPopover');
        const closePopover = document.getElementById('closePopover');
        const popover = document.getElementById('popover');

        showPopover.addEventListener('click', (event) => {
            const rect = event.target.getBoundingClientRect();
            popover.style.top = `${rect.bottom}px`;
            popover.style.left = `${rect.left}px`;
            popover.style.display = 'block';
        });

        closePopover.addEventListener('click', () => {
            popover.style.display = 'none';
        });
    </script>
</body>
</html>

HTML Details Element​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Details Element Example</title>
</head>
<body>
    <details>
        <summary>More Information</summary>
        <p>This is additional information that is hidden by default.</p>
    </details>
</body>
</html>

HTML DataList Element​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML DataList Element Example</title>
</head>
<body>
    <label for="browsers">Choose a browser:</label>
    <input list="browsers" id="browser" name="browser">
    <datalist id="browsers">
        <option value="Chrome">
        <option value="Firefox">
        <option value="Safari">
        <option value="Edge">
        <option value="Opera">
    </datalist>
</body>
</html>

HTML Inert Attribute​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Inert Attribute Example</title>
</head>
<body>
    <div id="modal">
        <p>This is a modal. The background is inert.</p>
    </div>
    <div id="content" inert>
        <p>This content is inert and not focusable.</p>
    </div>
    <script>
        // This script would handle toggling the 'inert' attribute for the modal logic
    </script>
</body>
</html>

HTML Color Picker​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Color Picker Example</title>
</head>
<body>
    <label for="colorPicker">Choose a color:</label>
    <input type="color" id="colorPicker" name="colorPicker" value="#ff0000">
</body>
</html>

HTML Capture Attribute​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Capture Attribute Example</title>
</head>
<body>
    <label for="camera">Capture a photo:</label>
    <input type="file" accept="image/*" capture="camera" id="camera">
</body>
</html>