This week I did some research to try to build a hamburger menu that opens a slide-out navigation panel, a common design pattern nowadays. But I wanted to ensure the whole thing was keyboard-friendly and as accessible as possible.
I’m not 100% sure what I’ve come up with is the most accessible solution, but I did consult a number of decent sources on building accessible navigation menus like these. I also did some rudimentary testing using the free NVDA screen reader, to ensure there are no major problems.
Over on CSS-Tricks, Chris breaks down what some in the industry have said on the possibility that there will one day be a CSS4. The latest article that Chris references is one by a well-respected member of the community, Peter-Paul Koch (“PPK”).
In brief, PPK believes in initiating some sort of marketing gimmick wherein we basically try to repeat the success of the buzz surrounding “CSS3” by pushing the name “CSS4”.
I probably don’t need to tell you that if you want to make it easier marketing yourself as a strong front-end web developer, it’s important to learn React. No, it’s not absolutely crucial, nor is it required. But React is undoubtedly the most important UI library in the front-end landscape in 2019 and it’s not going away anytime soon.
For example, consider the following code:
In CSS, every property has what’s referred to as an initial value. Sometimes this is called the default value, but the spec uses the term initial, which I think is a slightly better term.
Technically speaking, the initial value of any given property needs to be declared only if that value is overriding a previously-defined value that’s not the initial value. But initial values are often present even when they’re not necessary.
For example, suppose I have a block-level element that I want to take up the full width of its parent. I want it to sit on its own “line”, so to speak, in the layout, so I add the following CSS:
If you’ve been writing CSS for some time, then you’ve certainly done something similar to the following, and likely multiple times in a single stylesheet:
The lone declaration in the rule set above is what’s commonly referred to as a font stack. This line defines the font that the browser should use for the specified element (in this case, for the
<body> element). The stack is “Arial, Helvetica, sans-serif”. This instructs the browser to take the following steps:
In most cases, you should not use a leading or trailing space in an HTML attribute value. For example, if you add a leading or trailing space to an ID attribute, you wouldn’t be able to hook into that value in CSS using the ID selector (not that you use IDs as selectors, right?):
This happens because spaces are not allowed in an ID selector. But interestingly, there is a way around that using CSS’s attribute selector:
As you probably know, there are a number of HTML attributes that are considered global because they can be applied to any HTML element. Common examples include
One that was added a number of years ago in HTML5, and you may have forgotten about, is used on two elements in the following code:
There are two things here that you’re probably already aware of. First, HTML includes an
<output> element that allows you to display the “result of a calculation”. It’s a form element and it’s been around for some time, having been added in HTML5.
The other thing you’re likely to be aware of is that the
for attribute is normally used on the
<label> element to associate a
<label> with a form element. This aids accessibility and usability, as you’ve probably discovered as both a developer and a user. But interestingly, the
for attribute can also be used on the
This just in: Web developers are easily swayed by tentacled sea creatures. But wait, I’m getting ahead of myself. I’ll get back to that in a moment.
Caching and cache-busting front-end resources have been common for a number of years now. When dealing with front-end resources, you want to be able to accomplish two things: