meyerweb.com

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

Archive: 'CSS' Category

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!

rebeccapurple

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.)

Guidepost

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.

Discuss.

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.

How Twitter Got Its Line Breaks

In the past day or so, Twitter started “supporting line breaks”.  This is something lots of third-party clients had been doing for a while, and heck, even Facebook does it.  In fact, if you had a tweet with linebreaks get auto-posted to Facebook by the Twitter-to-Facebook tool that Twitter provides, the linebreaks would show up there even though they didn’t on Twitter itself.  Until recently.

So how did they do it?  With CSS.  Here it is:

.tweet-display-linebreaks .tweet .js-tweet-text{
	white-space:pre-wrap
}

That’s it.  I’m not going to comment on their selector construction, except in the meta sense that I just did, but that single rule is all it took.

Well, not quite all.  The other thing they’ve done is to trim off any leading or trailing whitespace, and make sure the tweet’s content is right up against the opening and closing tags of the element.  It looks like so:

<p class="js-tweet-text">Y’all ready for this?</p>

When I input that tweet, it was like this, extra linefeeds and all:




Y’all ready for this?



So why do they trim off the edges?  Because if they left any whitespace between the tags and the content, pre-wrap would honor it.  This would happen even if Twitter, and not the author, was the source of the linefeeds between tags and content.  So rather than just ensure the content was placed normally, without any extra space, they went the trim($tweet) route.  I’m sure there are ways to beat the trimming; I haven’t tried to find them.  And there may be perfectly good reasons why they went the trim() route.  Maybe someone from Twitter will drop by to fill us in.

I will also note that white-space: pre-wrap preserves spaces between characters, just like pre elements do.  That means that anyone who double-spaces after sentences will have that space show up in their tweets, for everyone else to see.  Just like with the line breaks, author intent is thus preserved.  Deal with it.

May 2015
SMTWTFS
April  
 12
3456789
10111213141516
17181920212223
24252627282930
31  

Archives

Feeds

Extras