Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Archive: 'CSS' Category

Gradient Flags

With the news today of the Supreme Court’s decision in Obergefell v. Hodges, and my recent completion of the part of CSS:The Definitive Guide that deals with gradients, I thought I’d create a couple of flags using linear gradients.

First, I’ll define the basic box of the flags.  The dimensions are the same as those specified for the U.S. flag, 1:1.9.  I added a couple of box shadows for visual constrast with the background.

div {height: 10em; width: 19em; margin: 3em;
    box-shadow: 0 0 0.5em rgba(0,0,0,0.25),
        0.4em 0.6em 0.5em rgba(0,0,0,0.25);}

Okay, with that set, first up is what’s often called the pride flag, which is to say the “rainbow flag”.  There’s an interesting history to the design of the flag, but I’m going to stick with “the six-color version popular since 1973”, as Wikipedia puts it.

For such a flag, we just need color stripes with hard stops between them.  That means putting the color stops right up against each other, like so:

div#rainbow {
    background: linear-gradient(180deg,
        red 0%, red 16.7%, 
        orange 16.7%, orange 33.3%,
        yellow 33.3%, yellow 50%, 
        green 50%, green 66.7%, 
        blue 66.7%, blue 83.3%, 
        purple 83.3%, purple 100%);

The first red 0% isn’t really necessary, nor is the last purple 100%, but I left them in for the sake of consistency.  You could remove them both in order to make the CSS a little smaller, and still get the same result.  I decided to go from red to purple, as the spectrum is usually described, which meant having the gradient ray point from top to bottom.  Thus 180deg, although to bottom would be completely equal in this case.

Now for the US flag.  In this case, things get a little more interesting.  I’ll note right up front that I’m not going to put in any stars, in order to keep this simple and gradient-focused, and yet it’s still interesting.  We could use a repeating linear gradient, like so:

    #B22234, #B22234 0.77em, white 0.77em, white 1.54em)

That would then cause each red-white pair of stripes to repeat vertically forever.  Because the specified stripes are manually calculated to be 1/13th of the height of the overall flag (10em), they’ll just fit like they should.

The problem there is that if the overall flag size ever changes, like if the height and weight are converted to pixels, the stripes will get out of sync with the dimensions of the flag.  Fortunately, we don’t have to rely on ems here; we can use percentages.  Thus:

    #B22234, #B22234 7.7%, white 7.7%, white 15.4%)

Ta-da!  The stripes are the right sizes, and scale with any changes to the height and width of the flag, and repeat as required.

That’s all well and good, but we still need the blue canton (as it’s called).  Since the canton will be on top of the stripes, it actually needs to come first in the comma-separated value list for background-image.  That gives us:

    linear-gradient(0deg, #3C3B6E, #3C3B6E),
        #B22234, #B22234 7.7%, white 7.7%, white 15.4%);

Wait.  A blue-to-blue gradient?  Well, yes.  I want a consistent blue field, and one way to create that is a gradient that doesn’t actually grade.  It’s a quick way to create a solid-color image that can be sized and positioned however we like.

So, now we size and position the canton.  According to the official design specifications for the flag, the canton is the height of seven stripes, or 53.85% the height of the overall flag, and 40% the width of the flag.  That means a background-size of 40% 53.85%.  The stripes we then have to size at 100% 100%, in order to make sure they cover the entire background area of the flag.  Finally, we position the canton in the top left; the stripes we can position anywhere along the top. so we’ll leave them top left as well.

The final result:

div#usa {
        linear-gradient(0deg, #3C3B6E, #3C3B6E),
            #B22234, #B22234 7.7%, white 7.7%, white 15.4%);
    background-size: 40% 53.85%, 100% 100%;
    background-repeat: no-repeat;
    background-position: top left;

And if you, like Bryan Fischer, believe that morally speaking “6/26 is our 9/11”, you can move the canton from top left to bottom left in order to invert the flag, which is permitted “as a signal of dire distress in instances of extreme danger to life or property”.

(Of course, it’s a lot easier to do that with background positioning since I didn’t include the stars.  If the stars were there, then we’d have left the canton’s position alone and done a rotateX() transform instead.)

So, there you go: two gradient flags.  You can see both (along with the “distress” variant) on this test page.  If you’ve any desire to use any or all of them, go ahead.  No copyright, trademark, patent, etc., etc. is asserted, implied, etc., etc.  I just wanted to have a little fun with gradients, and thought I’d share.

Friday Figure

Just for fun, and maybe for a little bit of edification, I present to you one of the figures from the chapter on color, backgrounds, and gradients I’ve just finished writing for CSS: The Definitive Guide, 4th Edition.

This figure is (at the moment) captioned “Very, very tall ellipses”; it’s a diagram of what happens if you create a radial gradient with no horizontal sizing.  (Whether you also have vertical sizing is actually irrelevant.)  The ellipses all get so incredibly tall that you only see the sides at their most vertical, which results in the appearance of a mirrored horizontal linear gradient.  This is of course explained in more detail in the chapter, and builds on a whole lot of previous text.

I had a much simpler version of this figure before, and shared it with Sara Soueidan, who had some very smart feedback that helped me get to what you see above.  The figure was finished not too long before i posted it; once it was done, I realized really liked the look, so decided on the spur of the moment to post it.  Thus the late-Friday timestamp on the post.

While the figure is a PNG, it’s actually a screenshot of an HTML+CSS file displayed in a browser—Safari, in this particular case, though most are done in Firefox.  All of the figures in the book will be created using HTML+CSS whenever possible.  Doing so lets me make sure I understand what I’m illustrating, and also allows me to change the look and arrangement of figures without too much difficulty.

So that’s fun with edge cases for this Friday.  If people like it, or more likely I just feel like doing it, I’ll post more in the future.

Run, Salmon, Run

I was recently asked on Twitter about the status of the fourth edition of CSS: The Definitive Guide.  A fair question, given how long the project has lain dormant!  I have two things to announce on that front.

The first is that I’m really excited to say that Estelle Weyl has joined me as co-author for the fourth edition.  We’re working in parallel, tackling individual chapters and doing technical review of each other as we work.  Sharing the load, especially with someone as sharp and knowledgable as Estelle, will help get chapters out faster, and the overall book done sooner.

The second is that writing is once again underway, with four chapters in process.  I’ve got the transforms chapter done, and the backgrounds and gradients (and maybe foreground colors too) chapter almost done.  Estelle is nearing the end of transitions and animations, with flexbox up next.  What comes after that for each of us is a little bit up in the air, though I’ll probably tackle basic visual formatting next.  Unless I get distracted by something more interesting, of course—truth be told, I’ve been eyeing grid layout with some covetousness in my heart.

So, the book is once again underway, and actually has been for a little while now.  I can’t say with certainty when we’ll be done and ready to compile everything into the Doorstop Edition, but we’re pushing for this year or early next.

As an offshoot of this renewed push, I’ve been expanding and revising my CSS test files so that I can check my understanding of the specification, as well as test the fine details of browser support.  Over the holidays I decided, more or less on a whim, to commit the whole kit ‘n’ kaboodle to Github.  There’s no license and no readme, mostly because I didn’t think to establish either when I set up the repository.  Sorry, I guess?  In any case, I regard the CSS in the tests to be public domain, but the actual content (whether inline or replaced) of the HTML files may or may not be, so a single license would have been hard to assert anyway.  I mostly put the files up there as a form of open backup, and also to smooth out the process of managing updates to the tests between my local machine and meyerweb.  Feel free to make use of the tests for your personal education, though!


I have been made aware of the proposal to add the named color beccapurple (equivalent to #663399) to the CSS specification, and also of the debate that surrounds it.

I understand the arguments both for and against the proposal, but obviously I am too close to both the subject and the situation to be able to judge for myself.  Accordingly, I let the editors of the Colors specification know that I will accept whatever the Working Group decides on this issue, pro or con.  The WG is debating the matter now.

I did set one condition: that if the proposal is accepted, the official name be rebeccapurple.  A couple of weeks before she died, Rebecca informed us that she was about to be a big girl of six years old, and Becca was a baby name.  Once she turned six, she wanted everyone (not just me) to call her Rebecca, not Becca.

She made it to six.  For almost twelve hours, she was six.  So Rebecca it is and must be.

Kat and I are deeply touched by all the caring and support from the community, and this proposal does mean a lot to me personally.  It will always mean that, even if the proposal is ultimately declined.  I always thought “it’s an honor to have been nominated” was a pleasant spin on sour grapes, but it’s not.  It really is an honor, regardless of the outcome, even if it is an honor I wish nobody had had cause to think of in the first place.

Thank you all.  For everything.

Update 22 Jun 14: the proposal was approved by the CSS WG and added to the CSS4 Colors module.  Patches to web browsers have already happened in nightly builds.  (I’m just now catching up on this after the unexpected death of Kat’s father early Saturday morning.)


As a followup to the recent public-speaking post, I want to talk about what’s happening with CSS: The Definitive Guide, 4th Edition.  So I will!

As many of you know, O’Reilly and I have been trying a new serial publication approach in which pieces of the book are released as they’re finished, generally at the ratio of one chapter per “pre-book”.  There are now five such books covering the first six chapters of the final book:

  • CSS and Documents, which covers the raw basics of how CSS is associated with HTML, including some of the more obscure ways of strapping external styles to the document as well as media query syntax.  It’s free to download in any of the various formats O’Reilly offers.
  • Selectors, Specificity, and the Cascade, which combines two chapters to cover all of the various Level 3 selector patterns as well as the inner details of how specificity, inheritance, and cascade.  It’s $4.99 to download, $9.99 to get on paper, and $10.99 to get both.
  • Values, Units and Colors, which covers all the various ways you can label numbers as well as use strings.  It also takes advantage of the new cheapness of color printing to use a bunch of nice color-value figures that aren’t forced to be all in grayscale.  $2.99 to download, $7.99 to print, $8.79 for both.
  • CSS Fonts, which dives into the gory details of @font-face and how it can deeply affect the use of font-related properties, both those we use widely as well as many that are quickly gaining browser support.  $5.99 to download, $7.99 to print, $8.79 for both.
  • CSS Text, which covers all the text styles that aren’t concerned with setting the font face—stuff like indenting, decoration, drop shadows, white-space handling, and so on.  $3.99 to download, $4.99 to print, $5.49 for both.

If you’re curious to know what other people think of these pre-books, all of the above except for “CSS Documents” and “CSS Fonts” have some customer reviews; “CSS Fonts” was recently reviewed by Virginia DeBolt.  If anyone who already has one wants to leave a review here in the comments, that’s fine too, though I’ll probably ask you to submit said reviews over at O’Reilly.

Given that all those are out, what’s next?  If I were to go by final-book-table-of-contents order, the next chapter would be “Basic Visual Formatting”, but I’m not going to do that, which is one of the big advantages of this approach.  Instead, my next topics are going to be transforms, transitions, and animations, and then flexbox.  Of course, all such plans are subject to change, but those are the topics I really want to do next, and they’re probably the most relevant topics to be talking about right now.

Given everything happening in my family’s life right now, I’m not going to try to commit to a specific schedule, because I might have to drop everything at next to notice at random.  All I can say is that I’ll be getting them out as soon as I can.

Resurrected Landmarks

It was just last week, at the end of April, that CERN announced the rebirth of The Very First URL, in all its responsive and completely presentable glory.  If you hit the root level of the server, you get some wonderful information about the Web’s infancy and the extraordinary thing CERN did in releasing it, unencumbered by patent or licensing restrictions, into the world, twenty years ago.

That’s not at all minor point.  I don’t believe it overstates the case to say that if CERN hadn’t made the web free and open to all, it wouldn’t have taken over the net.  Like previous attempts at hypertext and similar information systems, it would have languished in a niche and eventually withered away.  There were other things that had to happen for the web to really take off, but none of them would have mattered without this one simple, foundational decision.

I would go even further and argue that this act infused the web, defining the culture that was built on top of it.  Because the medium was free and open, as was often the case in academic and hacker circles before it, the aesthetic of sharing freely became central to the web community.  The dynamic of using ideas and resources freely shared by others, and then freely sharing your own resources and ideas in return, was strongly encouraged by the open nature of the web.  It was an implicit encouragement, but no less strong for that.  As always, the environment shapes those who live within it.

It was in that very spirit that Dave Shea launched the CSS Zen Garden ten years ago this week.  After letting it lie fallow for the last few years, Dave has re-opened the site to submissions that make use of all the modern capabilities we have now.

It might be hard to understand this now, but the Zen Garden is one of the defining moments in the history of web design, and is truly critical to understanding the state of CSS before and after it debuted.  When histories of web design are written—and there will be—there will be a chapters titled things like “Wired, ESPN, and the Zen Garden: Why CSS Ended Up In Everything”.

Before the Zen Garden, CSS was a thing you used to color text and set fonts, and maybe for a simple design, not for “serious” layout.  CSS design is boxy and boring, and impossible to use for anything interesting, went the conventional wisdom.  (The Wired and ESPN designs were held to be special cases.)  Then Dave opened the gates on the Zen Garden, with its five utterly different designs based on the very same document…and the world turned.

I’m known to be a history buff, and these days a web history buff, so of course I’m super-excited to see both these sites online and actively looked after, but you should be too.  You can see where it all started, and where a major shift in design occurred, right from the comfort of your cutting-edge nightly build of the latest and greatest browsers known to man.  That’s a rare privilege, and a testimony to what CERN set free, two decades back.

Blink Support(s)

Just a quick followup to last month’s post about @supports:

@supports (text-decoration: blink) {
	#test {
		color: green;
		background: yellow;
		text-decoration: blink;

Results in all @supports-supporting browsers I was able to test: green text on a yellow background, except Firefox 22, which additionally blinks the text.  The latest nightly builds of Firefox 23 do not blink the text, thanks to bug 857820.


Unsupportable Promises

Over the past year and a half, the CSS Working Group has been working on a CSS Conditional Rules Module Level 3 module.  Now, don’t get overexcited: this is not a proposal to add generalized, formal if/then/else or switch statements to CSS—though in a very limited way, it does just that.  This is the home of the @media rule, which lets you create if/then conditions with regard to the media environment.  It’s also the home of the @supports rule, which lets you…well, that’s actually more complicated than you might think.

I mean, what do you think @supports means?  Take a moment to formulate a one-line definition of your understanding of what it does, before moving on to the rest of this piece.

If you’ve never heard of it before and wonder how it works, here’s a very basic example:

body {background-color: white;}
@supports (background-color: cornflowerblue) {
	body {background-color: cornflowerblue;}

The idea is that if the browser supports that property:value combination, then it will apply the rule or rules found inside the curly brackets.  In this sense, it’s just like @media rules: if the conditions in the parentheses are deemed to apply, then the rules inside the declaration block are used.  The module refers to this ability as “feature queries”.

There are some logical combination keywords available: and, or, and not.  So you can say things like:

body {color: #222; background-color: white;}
@supports ((background-color: cornflowerblue) and (color: rgba(0,0,0,0.5))) {
	body {background-color: cornflowerblue; color: rgba(0,0,0,0.5);}

Okay, but what does that actually mean?  Here’s what the specification says:

A CSS processor is considered to support a declaration (consisting of a property and value) if it accepts that declaration (rather than discarding it as a parse error). If a processor does not implement, with a usable level of support, the value given, then it must not accept the declaration or claim support for it.

So in that first sentence, what we’re told is that “support” means “accepts [a] declaration” and doesn’t drop it on the floor as something it doesn’t recognize.  In other words, if a browser parses a property:value pair, then that qualifies as “support” for said pair.  Note that this sentence says nothing about what happens after parsing.  According to this, a browser could have a completely botched, partial, and generally unusable implementation of the property:value pair, but the act of recognizing means that there’s “support”.

But wait!  That second sentence adds an additional constraint, after a fashion: there must be “a usable level of support”, the lack of which means that a browser “must not…claim support”.  So not only must a browser parse a property:value pair, but support it to “a usable level”.

But what constitutes a “usable level”?  According to everyone who’s told me that I was wrong about vendor prefixes, any browser implementation of a feature should be complete and error-free.  Is that what’s required to be regarded as a usable level?  How about if the implementation has one known bug?  Three?  Ten?  Can any of them be severe bugs?  What about merely serious bugs?  What if two browsers claim usable support, and yet are not interoperable?

So.  How does the definition of @supports match the one-line definition I asked you to formulate, back at the beginning?  Are they exactly the same, or is there a difference?

I suspect that most people, especially those coming across @supports for the first time, will assume that the word means that a browser has complete, error-free support.  That’s the implicit promise.  Very few people think of “supports” as a synonym for “recognizes” (let alone “parses”).  There’s a difference, sometimes a very large one, between recognizing a thing and supporting it.  I’m sure that browser teams will do their best to avoid situations where a property:value pair is parsed but not well supported, but it’s only a matter of time before a “supported” pair proves to be badly flawed, or retroactively made wrong by specification changes.  Assuming that such things will be allowed, in an environment where @supports exists.

If feature queries were set with @feature, as media queries are set using @media, or even if the name were something along the lines of @parses or @recognizes, I’d be a lot less bothered.  The implicit promise would be quite a bit different.  What I feel like we face here is the exact inversion of vendor prefixes: instead of a marker for possible instability and a warning that preserves the possibility of changing the specification when needed, this pretends to promise stability and safety while restricting the WG’s ability to make changes, however necessary.  My instinct is that @supports will end up in the same place: abused, broken, and eventually reviled—except this time, there will be the extra bitterness of authors feeling that they were betrayed.

October 2015