HTML + CSS coding enhancements to increase professional "drawers" (Akemi Kusano / MDN Corporation (MdN))

Cover image of "HTML + CSS coding enhancement book (Akemi Kusano / MDN Corporation (MdN))" to increase "drawers" of book professionals

Purchase price:3190Yen


This article can be read in about 2 minute 45 seconds

There are few books that go into accessibility for the visually impaired and how to support screen readers with WAI-ARIA.

All of them are a treasure trove of knowledge and techniques that seem to be too deep, and they are advanced contents that are impossible for beginners of HTML / CSS to follow.What's more, being a single author makes me completely sick of the author's skills.

The clamp () function is used to set both the minimum and maximum values ​​in advance for values ​​that change dynamically according to the screen width.
width: clamp (150px, 50%, 800px);
* It expands and contracts at 50% of the parent element, but it should not be 150px or less and 800px or more.
This is the same behavior as writing width: 50%; min-width: 150px; max-width: 800px ;.
The clamp () function is especially useful when you want to set the minimum and maximum values ​​when you specify text such as headings with vw and dynamically enlarge or reduce it according to the screen width.

The line-height value, which represents the height of one line (line spacing), is usually specified as a multiple without a unit, such as 1 or 1.5. (Omitted) If you add a unit, the line height (font-size x line-height) calculated by the parent element will be inherited by the line height of the child element.
For example, if the font-size of the parent element is 16px and the line-height is 1em, the calculated line height will be 16px, but even if you specify font-size: 32px for a part of the child element, that part The line height remains 16px, and as a result, the font size is larger than the line height, so some browsers have a problem that the display that extends beyond the line height is cut off. It will end up.

For images that are intended only for visual effects and do not need to be transmitted as information, such as decorative parts, image images, and icons with the same text, empty the value of the alt attribute like alt = ””. Let's keep it. It is NG to delete the alt attribute itself just because the alt information is unnecessary.This is because some screen readers read the file name as it is, which may interfere with the reading of information.