Web Design Articles

Being Aware of Initial Values in Your CSS

By Louis Lazaris / August 6, 2018 / 5 Comments

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:

A Deeper Look at Generic Font Names in CSS

By Louis Lazaris / May 14, 2018 / 4 Comments

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:

On Leading and Trailing Spaces in HTML Attribute Values

By Louis Lazaris / May 2, 2018 / 4 Comments

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:

HTML5’s Global `hidden` Attribute

By Louis Lazaris / April 24, 2018 / 6 Comments

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 class, id, style, and tabindex.

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:

Using the `for` Attribute on the `output` Element in HTML5

By Louis Lazaris / April 17, 2018 / 0 comments

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 <output> element:

Cache Busting Front-end Resources: Is File Name Revving Still Necessary?

By Louis Lazaris / September 25, 2017 / 14 Comments

Squid 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:

Fixing Styles on `code` Tags Nested Inside Links

By Louis Lazaris / November 29, 2016 / 2 Comments

One thing that’s common in development blog posts and documentation is the use of HTML’s <code> tags to mark up code snippets inline and in large blocks (the latter of which is usually done along with <pre> tags).

One of the problems that occurs with styling of <code> tags, however, is when they’re used inline inside of links (or <a> elements).

onchange vs. oninput for Range Sliders

By Louis Lazaris / October 14, 2014 / 9 Comments

A common UI pattern for a range slider is to allow the user to move the slider and display the value of it somewhere on the page, changing the displayed value as the user moves the slider.

I think the expected behaviour in such a case is that the value should display instantly, as the user is moving the slider, rather than the page waiting for the slider to finish moving before the displayed value is updated. I suppose there could be cases where you prefer a delay over instant results, but I think the expected behaviour is to display the results instantly.

As you’ll see in the videos below and in your own testing, the behaviour of the input event compared to the change event is not exactly the same in different browsers when applied to a range slider.

Almost Single Page

By Louis Lazaris / August 8, 2014 / 0 comments

Slate published an interesting article on Google’s Master Plan. When I got to the bottom of the article, I noticed they had a multi-page article breadcrumb.

Oh, one of those.

Like many ad-driven websites, they split the article into two parts because it will get them more ad impressions. Okay, whatever. But what’s this?

Frontend RSS Feeds Revisited

By Louis Lazaris / June 2, 2014 / 14 Comments

Back in 2008, Paul Irish posted a modest list of RSS feeds for front-end developers to follow. Since that original post, he’s updated the list multiple times, and his list is now on GitHub growing to over 200 feeds.

It looks like the list hasn’t been updated in 6 months or more. Not a really big deal, but I noticed when I imported the OPML into my feed reader, there were a number of broken feeds, empty feeds, and feeds not updated in quite some time.

For a while now I’ve wanted to put together my own list of front-end feeds, so here it is.