Posts in the CSS Category

Rebirth

Published 21 years, 6 months past

As any visitor can easily see, the new design is in place and seems to be working smoothly.  In conjunction with the redesign, I’ve reworked the post structures and permanent URIs a bit.  The old URIs won’t change (’cause, you know, they’re cool) but moving forward, I’ve tightened the URIs up a bit.  In this, I followed Tantek’s lead to a large degree.  Generally my posts won’t include a timecode since it’s highly unlikely that I’ll post more than once per day.  (Shoot, any more I’m lucky to post more than once per week.)  If I ever do need a timecode for a post, it will be simple enough to add; my XSLT is already set up to handle it.

You may also have noticed that the posts previous to today have disappeared from meyerweb’s home page, and from the RSS feeds.  This happened because I rewrote some of the XSLT and changed the base XML structure of the archives, and trying to merge the old structure and transformations with the new ones was just too annoying for words.  So I’ve basically hit the reset button on the posts, although the old posts are still available from the archives, just as they always were.  It’s a temporary situation at best, since both the home page and RSS feeds will fill up as I write more entries.

As for the masthead image you can see today, it’s the same one I used for the Eos theme in the previous design, thus giving some minor sense of continuity to the process.  (Said image is the intellectual property of Tantek Çelik and used with his permission, by the way.)  The masthead image won’t remain constant—I’m planning to change it every week or two, with future images coming from photographs I’ve taken.  I already have thirteen ready to go, culled from the two thousand or so images in my iPhoto library.  I imagine that eventually I’ll add the ability to pick a favorite theme, or to pick one at random, or something.  I might even add the ability for you to supply the URI of an image you particularly like, although that seems a little obscure.  You can already do it with a user stylesheet anyway, since the site’s CSS signature (www-meyerweb-com) remains fully in place.  For those who feel the urge, the masthead images are 1280 by 128 pixels in size, and I’ve tried to keep them to 25KB or less.

Gradual changes will probably continue to happen for a while, in fact.  The sidebar content will be developed over time, for example.  I may also slowly enhance the design from its current sparse styling.  I doubt it’ll change a whole lot, to be honest, but I may from time to time test out new techniques or visual effects.

Let’s see, what else… oh yes.  If you’re using Mozilla or Safari (and maybe Opera), notice what happens when you mouse over the title of the post.  That’s generated content, not a background image, which is why Explorer doesn’t get the same effect.  This fails to bother me, since it’s more fun visual frosting than anything critical.  What’s interesting to note is that it doesn’t work in Safari 1.1 unless the border is changed in some way.  If the hover effect is removed, no generated content.  I wonder if that’s been fixed in the current internal builds.

The sidebar is absolutely positioned, and the gray area around the page content is the background of the html element (which means the black borders around the content are set for the body element).  The sidebar assembly was reworked so that it’s easy to add different content for different areas of the site.  For example, the Destinations on Kat’s page are different from those in my area of the site.  I haven’t done a lot with this capability yet, but probably will as time goes on.

That’s about it for now.  I’ll get back to the usual ramblings tomorrow.

Fractional Styles

Published 21 years, 7 months past

At the Web Design Meetup last week, Warren expressed annoyance that there are a limited number of fraction character entities.  I pointed out that you can use MathML to represent any fraction you like, but of course it requires a browser that supports MathML.  Those are kind of rare.

So absent MathML, it’s easy to get a nice presentation of, say, one quarter (¼, a.k.a. character entity ¼), but how do you get a similarly nice rendering of thirteen thirty-seconds?  As it turns out, you can at least get close with a bit of structural massaging.  (That sounds so much better than “structural hacking,” doesn’t it?)  Here’s what I came up with: 

span.frac sup, span.frac sub {font-size: 75%;
  vertical-align: baseline;
  position: relative;}
span.frac sup {top: -0.5em; left: 0.15em;}
span.frac sub {left: -0.15em;}

17 <span class="frac"><sup>13</sup><b>/</b><sub>32</sub></span>

That results in the following, which I recreated using inline styles just to make life easier when I archive this post:

17 13/32

Not too bad, at least in Safari, Mozilla, and IE5/Mac, but not great.  In his own efforts along these lines, Warren uncovered the fraction-slash character entity (&#8260;), which could help improve the result.  I also notice that my numbers are bigger than the numbers in the original entity.  So I adjusted my styles, with the following result. 

span.frac sup, span.frac sub {font-size: 60%;
  font-weight: bold;
  vertical-align: baseline;
  position: relative;}
span.frac sup {top: -0.5em; left: 0.1em;}

17 13⁄32

So let’s compare the one-quarter entity to the styled version.

¼   1⁄4

There are font-family differences, I admit, but they’re pretty close to each other in the browsers I mentioned before.

The problem, really, is the markup involved, but I don’t see how one can really reduce it any further.  MathML’s representation of fractions isn’t noticeably less weighty, really, not even counting possibly required namespacing, which I’m not going to include here: 

<mfrac><mi>1</mi><mrow>4</mrow></mfrac>

I suppose that if I wanted to show arbitrary fractions a lot, I could represent them in MathML and then transform the math markup into HTML before delivering it to browsers.  I don’t have a lot of need for such fractions, at least not so far, but it was an interesting exercise.

Now for a little cleanup with regard to previous posts.

  • Chuq pointed out that iLife was never totally free, but that Apple was allowing updates to old versions at no cost.  In my case, iLife appeared to be free because it came installed on my OS X laptop, so I never overtly surrendered money for the product.  I suppose the cost is somehow built into the cost of the operating system.  Regardless, I still think that there was a bit of baiting and switching in letting people download major upgrades at no cost and then closing the gate.  I guess what I want is consistency; I didn’t realize I was benefitting from lax license enforcement, if that’s what it was.  I thought Apple was just making decent tools available for free to Mac users in order to draw more people to the Mac.  That would make some business sense, even if it isn’t what they were doing.  After all, I haven’t heard any plans to charge for upgrades to iTunes, and I don’t expect that I will.  Apple may be many things, but grossly stupid isn’t generally one of them.

    At any rate, I’d still be interested in paying for just an iPhoto upgrade, especially since I looked at some programs readers e-mailed me to suggest, and they were all either not what I wanted, or too darned expensive.  I imagine there are people who would pay to download GarageBand as a standalone, for example.

  • It turns out that there are a number of demonstrations of using behaviors to get PNG transparency in IE/Win.  Here are a few that people sent me:

    I’m sure there must be others.  Google could tell me, but I feel overloaded already.

Carolyn turns six weeks old tomorrow.  I’ll have to find a good picture to post, especially since so many people have asked for them.  She’ll get her own page sooner or later, but I’ve had other and much more pressing things on my plate.  As long as I have it ready by the time she wants to start blogging…

Running Just To Stay In Place

Published 21 years, 7 months past

The e-mail backlog has finally forced me to do something I’ve long resisted: the site now has an FAQ.  I thought about calling it a QAF (Questions Frequently Asked) or maybe an FRE (Frequently Received E-mails).  But in the end the weight of tradition got me to go with the traditional nomenclature.  If you’re thinking of sending me e-mail, please read the FAQ first to see if the answer is there.  As much as I love correspondence, I just can’t keep up any more.  In fact, I couldn’t even before Carolyn arrived, and so now I’m doubly unable to keep up.  Hopefully the FAQ will help, just a bit.  Thanks for your collective understanding.

This is truly excellent: arbitrary-element hovering in IE/Win.  In other words, stuff like pure CSS menus and such can actually be used in real-world designs, thus reaping the benefits of dramatically reduced markup weight.  The approach the behaviors take reminds me a lot of what we did to get the Netscape DevEdge menus working in IE/Win, except we did it in JavaScript, which may have made our technique a little weightier on the back end.  Either way, they’re both excellent solutions.

There’s a lot more gold to mine in the behaviors/script/structural markup vein, I suspect; the melding of IE-specific behaviors with lightweight scripts and CSS could lead us to a great many advances in standards-oriented design.  While it would be nice to see IE advancing so that we didn’t need these kinds of solutions, at least they exist.  Here’s my short, off-the-cuff wishlist for things for which we can hopefully use behaviors to replicate CSS2 functionality:

  • Support for generated content; counters would be a truly awesome bonus
  • Fixing the box model in versions of IE previous to IE6
  • Better (read: more smoothly scrolling) support for fixed-position elements and fixed-attachment backgrounds than current scripts provide

I think there’s a way to use behaviors to get alpha-channel support in PNGs, too.  Can anyone confirm that?  If not, it’s something to investigate.

Now on to slightly more surreal matters.  Sure, I’m fairly well known as an expert in CSS and Web standards, and some of you know that I do a weekly Big Band-era radio show, but how many of you were aware of my career as a shoe designer?  Doug Bowman wrote to let me know that Matt Haughey had spilled the beans, so I’ll own up to it here.

Okay, not really.  But if you go to the Medium Footwear site, wait for the Flash interface to load, hit “Collections,” and then click anywhere on the splash page, you’ll see—and I swear that, like Dave Barry, I am not making this up— the Eric Meyer Collection.  There are nine different models, and the really funny punchline to the whole affair is this: guess which of those shoe styles I like enough to consider buying?  As it turns out, the “Structuralist” design.  Seriously.

Turning Points

Published 21 years, 7 months past

As the calendar turns to another year, I’ve reached a major goal.  I just now finished writing the preface and dedication for the second edition of Cascading Style Sheets: The Definitive Guide, which means that the primary writing is fully and completely done.  Some chapters have already been through technical review, copyedit, and author review, and are moving through production.  Others are queued up for me to deal with in the next several days.  So it looks very much like we should be able to put the book on shelves, and into your hands, before summer gets underway.  This is, for me, a major relief.

As for the sequel to Eric Meyer on CSS, that’s suffered some setbacks due to Carolyn’s arrival, so I’m not sure when it will be finished and published.  Half the projects are already written, and the sixth has the working files all set up.  That leaves just a few more to write.  I’m hoping to get them finished before January is done, but I’m feeling less and less optimistic about meeting that goal.  We’ll see what happens.

Speaking of Carolyn, she’s suffering through her first cold, so we stayed home last night.  There are certainly worse ways to spend a New Year’s Eve than with your wife, new daughter, and a home-cooked meal.  We didn’t even bother to watch the ball drop, although the shouted countdowns from our various neighbors let us know exactly when the new Gregorian year began.

As Kat and I lay in bed last night, Carolyn miserably gurgling and wheezing between us, I kept saying to myself, “It’s just another day.”  There was something about the change to 2004 that hit me hard, a realization that this is the first year in which Mom has always been dead.  Throughout 2003, even though she was gone, she’d been a part of that year.  When that last digit changed, artificial though the division of time might be, there was suddenly a sense that I was farther away from Mom, that I’d crossed a boundary that was suddenly like a wall between us.

But it is, in the end, just another day.  Mom doesn’t have to be any further away from me than she was yesterday, or the day before.  She is always as close as I choose to allow, as close as my memories of her will permit.

The Fix Is In

Published 21 years, 8 months past

I feel kind of honored whenever I find out a browser’s been altered (hopefully fixed) as a result of something I’ve done.  Check out point (20) in Dave Hyatt’s recent Safari progress update.  Glee!  I could also feel good about point (19), which I reported as a bug a while back, but I apparently they’d known about it long before I noticed it.  To see that bug in action, drop by the XFN profile document.

My optimism on Sunday regarding Libya may have been misplaced, it seems—or was it?  It’s hard to tell, and CNN isn’t much help, since it’s provided information on both sides of the fence.  In a summation article regarding an interview Gadhafi gave to CNN, it was stated:

Asked about his decision, Gadhafi acknowledged that the Iraq war may have influenced him, but he insisted he wanted to focus on the “positive.”

For that matter, the title of the article was “Gadhafi: Iraq war may have influenced WMD decision.”  That was on Monday.  I went looking for a full transcript, because I wanted to see exactly what was said, but didn’t find one.  When I went back again to look on Tuesday, the article had been updated and did not contain the above paragraph.  It instead stated:

Asked about his decision to dismantle programs and whether the Iraq war or the capture of former Iraqi leader Saddam Hussein may have influenced him, Gadhafi questioned why Iraq had to be his role model.

The title had been updated as well, now to “Gadhafi hopes for new era of U.S.-Libya relations.”  Still no transcript.

Notice that in neither case was Gadhafi’s answer on the subject of the war’s influence actually quoted.  So in the absence of video of that segment of the interview, or else a detailed transcript, I’m left wondering just what the hell he really said, and whether or not I should retract some of the things I said on Sunday.

So I’ll punt on the whole thing, and just share The Hoser with everyone.  Merry Christmas, eh?

Friendly Discussions

Published 21 years, 8 months past

We’ve gotten some interesting feedback about XFN, as well as a number of blogroll adoptions and even tools that offer XFN support!  Two commentaries in particular drew me in:

  • Richard Tallent pointed out that XFN could be a key component of building trust networks between blogs.  He also had some gripes about the syntax and scope, which is fine, as we don’t envision XFN as being complete by any means and are very keen to see what people suggest.  My responses can be found in the comments section of his post.
  • Leigh Dodds took me mildly and quite fairly to task for some minor inaccuracies in the XFN/FOAF comparison article I wrote, and also had some great observations and ideas regarding XFN.  Leigh’s comment that he finds XFN to be elegant was especially satisfying, because Matt, Tantek, and I worked hard to keep it that way.

One of the things I forgot to point out in my announcement yesterday is that not only can you add XFN values to your links, but you can do so and still have your HTML validate— see, for example, the validator report for the main page of meyerweb— because XFN uses an existing HTML attribute (rel) in a way that HTML itself allows.  In other words, XFN enhances the Web without breaking it, very much in the spirit of Tim’s original vision of interlocking technologies that worked together to create a social medium.  That’s an important aspect of XFN, and one I didn’t want to overlook.

Of course, XFN isn’t constrained to HTML.  Any XML language can also use XFN, given the right hooks are included in the language’s DTD.  Thus, we’ve created something that works today as well as tomorrow.

We’re still very interested in suggestions and constructive criticism, so keep those posts coming!

Appropriate Selections

Published 21 years, 8 months past

Okay, a lot of you have managed to come up with puns and jokes similar to the one I first saw at Jay Allen‘s site, and Dunstan Orchard has taken the whole theme to the (il)logical conclusion.  One of the most common puns I’ve seen is: 

#ericmeyer:first-child

Amusing, yes, but here’s the problem: that describes any element with an id of ericmeyer that is the first child of another element.  Now, I can be described that way; I am the oldest of my parents’ two children.  But it doesn’t describe Carolyn, unless we accept the convention that a child’s id should be given a value with his or her father’s name.  Such a convention would limit every father to one child, which might make for excellent social policy but seems unnecessarily restrictive from a structural point of view.

So, while this particular little joke validates, it doesn’t do what the author(s) intended, probably due to the widespread lack of understanding about what :first-child actually does. A closeup picture of Carolyn, showing her hazel eyes and shock of dark hair to full effect. You’re supposed to be describing her, people, not me!  Every time you write an inappropriate selector, it makes the Baby Carolyn cry.  You wouldn’t want to make her cry, would you?

A selector that does describe her is: 

#ericmeyer :first-child

…which is functionally equivalent to: 

#ericmeyer *:first-child

Both will select any element that is the first child of another element and is also descended from an element with an id of ericmeyer.  This would also select the first children of any children that I have, so first grandchildren (and so on) would be members of the same set.  Thus, it might make slightly more sense to use the following: 

#EricMeyer > :first-child

…which is to say, any element that’s the first child of an element whose id is EricMeyer—more precisely, any element that is the first child of another element and is also the child of an element with an id of EricMeyer.  I suppose that this particular selector could describe many children, as I expect I’m not the only ‘EricMeyer’ (and yes, the capitalization matters) in the world to have had a child.  But it should, at least within the confines of my docu—er, my family tree, select Carolyn uniquely.

Here endeth the lesson.

At another time of year, I might have struggled with what kind of music to play for Carolyn.  Big Band?  Classical?  Hard rock?  Some blues, maybe?  “Weird Al”?  Fortunately, there is no dilemma, as we’re pretty much playing holiday music front to back.  Jiminy Cricket sings “From All Of Us To All Of You” about twenty times a day.  Good thing I have a fondness for that record.  I’m still going to get Handel’s “Messiah,” Bach’sBeethoven’s “Ode To Joy,” and a few other pieces from Bombastic Dead White Guys into the mix.  Plus “Santa Baby” as sung by Eartha Kitt.  May as well start with the confusion early!

I’ve just read, much to my confusion, that Diana Krall and Elvis Costello were married in Elton John’s mansion, thus forming a Weirdness Trifecta.  I mean, hey, if they’re happy with each other, I’m all for it, but those just aren’t names I would have put into the same sentence.  Ever.

Rolling On

Published 21 years, 8 months past

As an experiment, I’ve added a ‘blogroll’ to the home page of meyerweb.  Those of you using IE/Win and the default theme (Eos) won’t see it because of positioning bugs in IE/Win, and you’ll get slightly incorrect display in a couple of other themes, but people using more conformant browsers should have no trouble.  This isn’t the list’s final form by any means—as I say, it’s an experiment.  It’s actually pushing me toward YAR (Yet Another Redesign), truth be told, one that compacts the sidebar content so that I can introduce new stuff.

Suddenly I have an idea for an update of the classic “Yar’s Revenge.”  In this new version, you control a Web designer who runs around the screen avoiding validation errors, font-sizing bugs, table-layout fanatics, CSS-layout fanatics, wandering usability experts, and snarky bloggers while trying to collect as many design components, standards powerups, and “help points” as possible in pursuit of your ultimate goal: a new redesign that’s accessible, attractive, and uses very lightweight markup.  Every level is a new redesign, each one requiring more standards and components than the last one.  Anyone who makes it past five redesigns without giving up in frustration earns the title “Web design guru.”  Once you attain that rank, you’ll have about ten times as many bloggers trying to tear you down in subsequent levels.  Have fun!

For some reason, I’m strongly reminded of the writing I’ve been doing this weekend.  I said a while back I had one chapter left to write in the second edition of Cascading Style Sheets: The Definitive Guide.  I still do, although said chapter is (at the moment) about 80% done.  It’s the chapter on table presentation, and let me tell you, it’s definitely my least favorite chapter.  I think I did a decent job explaining things, but the subject matter itself is… well, I don’t like it.  Both of my technical reviewers expressed their sympathies to me before I started writing it; that ought to tell you something.

Regardless, the chapter should be done by the end of the weekend.  Then all I’ll have to do is write/create the last few appendixes (no big deal) and go through the author review stage, where I look over the copyeditor and technical review comments and make any necessary changes.  And then it will be really and truly done.  I’m no longer sure how long it will take to finish up those last few bits, but I still hope we’ll have the book on shelves before next summer.  Keep your digits crossed…

Browse the Archive

Earlier Entries

Later Entries