Posts in the CSS Category

Here’s the latest version of my “baseline” style sheet, with some changes based on feedback from readers on the original post.

/* Don't forget to set a foreground and background color 
   on the 'html' or 'body' element! */
html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	line-height: 1;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
}
a img, :link img, :visited img {
	border: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol, ul {
	list-style: none;
}
q:before, q:after,
blockquote:before, blockquote:after {
	content: "";
}

The changes are:

1. The leading comment — rather than fill in some default document colors, which I hesitate to do given how often they’ll be changed, I just threw in a comment reminding the author that setting them is a good idea.  I’d expect that anyone who uses their own set of baseline styles will fill in their own favorite color set.

2. font-weight: inherit; — this used to be normal, but it was pointed out that this would upset normal inheritance.  For example, if you set a div to be boldfaced, none of its descendant elements would inherit that boldness (because they’d be explicitly assigned normal).  Using inherit avoids this problem while still “zeroing out” boldface styling.

3. font-style: inherit — same reasoning.

4. vertical-align: baseline — this brings everything onto the baseline, including superscripts and subscripts.  This forces authors to determine the exact vertical offset they want for such elements, as well as any others they might care to vertically shift, as well as how they’ll accomplish said shift(s).

5. a img, :link img, :visited img — this will make sure images in anchors and links don’t have a border by default.  Using a img covers images in named anchors, while the rest of the selector handles images inside either visited or unvisited links.  You might consider a img to be sufficient, and for now you’d be right.  But in the future, any element may be a link, not just a elements, so this gives us a bit of future-proofing.

I also put some spaces into the selectors to make them easier for me to read.  If you use these styles, you might consider stripping out the unnecessary whitespace to compact the rules as much as possible.

It was suggested that min-width: 0; be added to the first rule in order to invoke hasLayout, but Ingo Chao explained why that was a bad idea.  It was also suggested that text decorations should be removed from links, but I’d rather not.  I try never to mess with link decorations, and also figure that anyone who feels otherwise can add their own text-decoration declarations.

So we’ll see how well this one stands up to use in the wild.  Let me know!

• Reworked Reset was published on Saturday, April 14th, 2007.
• It was assigned to the CSS category.
• There have been ninety-nine replies.

At AEA Boston, I advocated using a “reset” or “baseline” set of styles, but not one based on the universal selector.  Instead, I said the styles should list all the actual elements to be reset and exactly how they should be reset.  During the Q&A afterward, an audience member asked me if I would create such a style sheet to share with the world, and I said that I would.

Then, during the break, someone else (sorry I’ve forgotten who!) reminded me that the Yahoo! UI group already did it with reset.css so I don’t have to.  Awesome!

…except that I don’t think it goes far enough in some areas, and a little too far in others.  So here’s my version of reset.css, based off of the YUI styles.

html,body,div,span,
applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
dd,dl,dt,li,ol,ul,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
	line-height: 1;
	font-family: inherit;
	text-align: left;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol,ul {
	list-style: none;
}
q:before,q:after,
blockquote:before,blockquote:after {
	content: "";
}

I omitted elements like hr and the various frame-related elements, as well as form elements like input and select, because of their general weirdness, though I may change my mind about those at a later date.  I intentionally left out dir and menu because of their deprecated status.

I’m absolutely open to questions, comments, and suggestions, so feel free to use the comments for that purpose.

(Side note: if anyone’s disturbed by the unitless value for line-height, please read my post “Unitless line-heights“.)

Addendum: There have been some good suggestions in the comments, so they’re definitely worth reading.  See also the followup post, which incorporates some of those suggestions.

• Reset Styles was published on Thursday, April 12th, 2007.
• It was assigned to the An Event Apart and CSS categories.
• There have been seventy-five replies.

From my comment queue, possibly the first time I feel a spammer is really speaking to me as a person:

Did u ever heard about CSS…? it will help your site.

Do tell, oh random anonymous stranger whose site URL crudely references the genitalia of older females!  I wish to learn.

• Stylish Spam was published on Friday, March 30th, 2007.
• It was assigned to the CSS and Humor categories.
• There have been seventeen replies.

Here’s a fun Friday question for everyone: what do you consider to be some of the most important events in the history of CSS and web design?  How about some of the most overlooked events in that same history?  (And yes, an event can be both.)  I’m not looking for the “best” answers—I want to know what you regard as important, overlooked, or otherwise worthy of mention.  So tell!

• Events in CSS and Web Design History was published on Friday, February 9th, 2007.
• It was assigned to the CSS and Web categories.
• There have been eighty-one replies.

Among all the other stuff this past week, I let something slip off the radar: an interview with me over at the Lunartics blog.  The interview was conducted via e-mail by Amy Armitage, who I briefly met last year at the Webmaster Jam Session in Dallas.  It’s not your usual “why is CSS important” kind of interview; Amy likes to keep things fun while still covering serious questions.  It’s definitely worth a read.

It also scoops news of a development I’ve never gotten around to mentioning: in October 2006, I was inducted as a member of the International Academy of Digital Arts and Sciences.  It’s a pretty incredible honor, given that it’s an invitation-only body of 500 members including “David Bowie, Virgin Group founder Richard Branson, Internet inventor and Google Chief Internet Evangelist Vinton Cerf, ‘Simpsons’ creator Matt Groening, Real Networks CEO Rob Glaser, and fashion designer Max Azria”.  The fact that my name appears on the same list as those people is jaw-dropping enough.  To me, it wasn’t the most stunning part by a long mile.

I’ll admit, though I’d heard of The Webbys, I assumed the IADAS was one of those name-collector groups, like those “Who’s Who in America” books where you pay to be listed.  Instead, I found that the IADAS levies no membership fees, and I was deeply surprised and pleased to discover that they invite people based on their actual qualifications.  How do I know?  Because my welcoming letter didn’t praise my web design work.  Instead, it cited my “dedication to promoting Web standards”, my “international recognition on the topics of HTML and CSS”, and proclaims that I’ve “helped inform excellence and efficiency on the Web”.

Yes, the text string “HTML and CSS” was actually in the letter.

It’s a little difficult to express how important this recognition is to me.  See, most of the time, I’m introduced and perceived as an influential web designer, which is frankly insulting to actual web designers everywhere.  If you aren’t reading this post via RSS, look around.  Does this look like influential web design?  Hell no.  At best, we can call meyerweb’s design minimalist and maybe—maybe—possessed of a certain elegance.  And it only took me five years and ripping off ideas from Khoi Vinh to get here!

But I’ve never claimed to be a designer.  I think the perception that I am one arises because I get linked to from people who really are designers.  I’ve always claimed to be a communicator.  I’m someone who’s done his best to explain, promote, and advance the technologies that let designers do their work.  I’ve invested tons of time and effort into making good web design easier without sacrificing clean and semantic markup.  I wouldn’t say that work is done by any stretch, but there’s been a lot of progress.  Sometimes I forget just how much.

And so, to be invited to join the IADAS not for what I’m usually thought to be, but actually for who I am—it’s an indescribable feeling.  A fantastically good one, certainly!  But not one I could describe no matter how many words I threw at the problem.

It’s a delicious irony, and I do so love my irony:  my powers of communication fail me when I wish to express my feelings over being honored for my communicating, over all those years, my love of the web and my passion for getting it right and the inner workings of how to make that happen.

But I can at least say this:

Thank you.  Thank you for coming to read my posts, for reading my books and articles, for listening to me speak.  Thank you for being the other end of the conversation.  Thank you for being open to what I have to say, and for responding with your insights and perspectives, all of which have changed me in untold ways.  Thank you for making everything I’ve done and said and written about the web worth far more than what I put into it.

Thank you for making this honor possible.

• I’d Like To Thank The Academy… was published on Saturday, February 3rd, 2007.
• It was assigned to the CSS, Interviews, Personal, Standards, and Web categories.
• There have been eight replies.

Last Thursday, I came down from the office to discover a stack of five boxes on the front porch.  Three were for Kat, who is one of those annoying people who plans way ahead for Christmas, and two others were my author copies of CSS Web Site Design (formerly “CSS Hands-On Training”).  This is a title I did for lynda.com, and published by Peachpit, and it’s most tersely described as “Eric Meyer on CSS, but for beginners”.  It’s also the hard-copy version of the video training title “CSS Site Design“, and includes all the videos and exercise files from the video title on a CD-ROM bundled with the book.

After I’d hauled all that into the front hallway, I grabbed my car keys and headed out the back door to run my errand.  At which point I nearly fell over two more boxes, these containing my author copies of the third edition of CSS: The Definitive Guide from O’Reilly.  This is of course an update of the second edition, which contains some updates based on the latest version of CSS 2.1, expanded selector coverage, updated compatibility notes taking IE7’s improvements into account, and corrected errata from the previous edition.  It’s not a major update compared to the second edition, admittedly, but if you don’t already own the second edition, it’s well worth acquiring (if I do say so myself).

It’s a bit funny that both sets of books arrived on my doorstep the exact same day, considering that the two projects started out well separated, and gradually synched up.  At first I was going to write one and then the other, but various complications set in and they started to interweave.  I finished their final reviews with a whole lot of overlap—that was a fun couple of weeks—and now, the waves have fully amplified.

What really cracked me up was that the next day, I got packages from both Peachpit and O’Reilly, each containing a single copy of the respective books, and each containing a note along the lines of “Here’s your advance copy; the rest should arrive in a few weeks!”.

• Two Books Together was published on Friday, November 17th, 2006.
• It was assigned to the CSS and Writing categories.
• There have been six replies.

Cripes.  In preparing to mention some upcoming appearances, I realized I’d never gotten around to mentioning a couple of events in the recent past; specifically, AEA Seattle and the Webmaster Jam Session.  I’ll get to those in the next couple of posts, and then fire off a couple of reviews.

What I called you all here for, though, was to pass along news of an upcoming two-continent microtour.  Yes!  You can almost feel the white-hot spirit energy of this global adventure, can’t you?  I know I can, and unless I’m very much mistaken, I see it in your eyes too.

It’s a special thing we’ve just shared.  Don’t tell anyone else.

The festivities will start with my return to London (UK, not Ohio) for a two-day Carson Workshop on December 7th and 8th.  You can learn more at the Carson Workshops site, of course.  I hear tell that a goodly chunk of the limited seating has already been claimed.  In the course of the two days, I’ll be leading an expedition into the very heart of CSS.  From the darkest, thorniest jungles to the spectacular hidden vistas glimpsed only by a few lucky souls we will travel, and those who emerge alive will truly be a band of brothers and sisters.

Since I’ll already be in London on the date, might there be a stop by the BBC Backstage Bash?  Could be.  Could very well be.

From the sun-kissed shores of wild England, I’ll wing my way to verdant Boston for Web Design World.  It will be there that I will spend half a day—said day being December 11th—presenting a condensed version of some parts of the content covered in London, an overland flight giving us an idea of where the previous week’s group blazed a mighty trail.  Yes, I’d like to present it all, but since I have not (yet) fully asserted dominance over the flow of time, I have no way to fit two days into half a day.  It would be like trying to fit a Danish prince inside a nutshell.  No matter how you or he may espouse theories of some fabled infinite space to be ruled within that diminuitive husk, homey just won’t fit.

My work in Boston having been completed, I will make my way homeward at last, nearly a full week and many thounsands of miles after leaving it, tired but triumphant, ready to face the New Year and all the changes it will bring.

So now you know.  And as well we know, knowing is half the battle.

(For those who might be in the know, a bonus prize to anyone who can identify the web site and author I was homage-ing in this post.  Not parodying!  No no!  I’m not sure such a thing would be possible in any event.)

• Hands Across the Sea was published on Wednesday, November 1st, 2006.
• It was assigned to the (X)HTML, CSS, and Speaking categories.
• There have been five replies.

This morning I got word in my RSS feeds that Google has launched what they call “customized search engines” through Google Co-Op.  As a test, I created a CSS search engine.  Go ahead, try it out.

       

There are two ways to configure a custom search engine.  One is to search the whole web but emphasize the sites you list.  The other is to search only the sites you list.  While the second might seem to be overly restrictive, the first doesn’t really seem very useful, at least for a CSS search engine.  When I compared the “CSS search” to “Web search” results, they really didn’t differ all that much—in some cases, having the same ten results on the first page, but in a slightly different order.  On occasion, the “Web search” ordering was actually more useful.

So I set up the CSS search to be restricted to the sites I listed, which I thought seemed relatively useful.  Only whenever I run the search from meyerweb instead of within Google, I get the “whole Web” search instead of the “only my sites search”, which either means I’m doing something wrong or I’m just too early an adopter.  Hopefully it’ll work as intended for you.  (Update: it seems to be working as intended now.)

Anyway, I’m not about to pretend that the six sites I included constitute the entirety of sites with useful CSS information.  Thus, I’ve set up the CSS search to be open to any volunteers.  If you have a Google Co-Op account (which I think is just any old Google developer account, such as you might have created for Google Maps) or want to create one, you can add sites to the ‘approved’ list without any say-so on my part.  Though I do have the power to boot sites that aren’t relevant, or too far out of date, or that look at me cross-eyed, or whatever.  To do so, I think you click the “Edit this seach engine” link on my CSS Search home page and then click on “Collaboration” to volunteer.  Or you might be able to go directly there.  I have to accept volunteers, so kindly be patient if it takes me a day or three.  And I’m going to simply reject any anonymous volunteers—sorry if that’s you.

For those that don’t have or want a Google account, feel free to suggest sites in the comments here.  In terms of getting them actually added, you’ll be at the mercy of my free time; but then again, so am I.

• CSS Search was published on Tuesday, October 24th, 2006.
• It was assigned to the CSS category.
• There have been twenty-six replies.