随笔分类 - HTML 5
摘要：Layout reflow Layout reflow can be a performance bottleneck. Let's see how to identify it in the browser and what causes the reflow. In normal process
阅读全文
摘要：When you give an element an id attr, it will automaticlly create a object with the same name of id: <form id="theform" action="/" method="post"> <labe
阅读全文
摘要：Here we use HTML and CSS to create a stylish yet semantic tooltip on a form input. I am using aria-describedby to create a relationship with the input
阅读全文
摘要：According to HTTPArchive, images are the most requested asset type for most websites and usually take up more bandwidth than any other resource. At th
阅读全文
摘要：When to use describedby: For example you have a close button: When to use labelledby: For example you have Billing section, inside you have address fi
阅读全文
摘要：In this lesson, we will be going over the attribute aria-expanded. Instead of using a class like .open we are going to use the aria-expanded attribute
阅读全文
摘要：What's in a name? In this lesson, I'll explain the concept of naming interactive elements for screen reader users, including forms, buttons, and links
阅读全文
摘要：Animations can make people sick, or worse! By adding animation toggles and listening in to the user's system preference for reducing motion on OSX and
阅读全文
摘要：Learn how to create a modal dialog with accessible keyboard and screen reader mechanics using the native HTML5 dialog element and experimental inert a
阅读全文
摘要：In this lesson, we are going to use aria-current to give a screen reader user more context about what the current page is. Historically, many develope
阅读全文
摘要：In this lesson, you'll learn how to use the loading="lazy" attribute available on images and iframes to lazily load below the fold images, which saves
阅读全文
摘要：Another way to add plain text to templates is to prefix a line with a pipe character (|). This method is useful for mixing plain text with inline tags
阅读全文
摘要：Shadow DOM is part of the web components specification. It allows us to ship self contained components along with their style and isolate the componen
阅读全文
摘要："If you can't measure it, you can't improve it." The first step when doing performance work is to measure meaningful metrics to establish a baseline f
阅读全文
摘要：We want to show an SVG avatar of the patio11bot, so we'll do that in three ways: Using an img tag - which is easy, but doesn't let us access the inter
阅读全文
摘要：HTMLTemplates are part of the web components specification. In this lesson we will learn what are HTML templates, how to use them and how to use the p
阅读全文
摘要：Custom elements are fun technology. In this video, you will learn how to set one up and running in less than 2 minutes. You'll learn how to create a C
阅读全文
摘要：It's possible to access some, but not all, of the native device features from a PWA. One that we canaccess, is the camera and camera roll. We'll use t
阅读全文
摘要：For small viewports, we may want to show a variation of the desktop image. A very common use case of this is a cropped, smaller version of the desktop
阅读全文
