Posts in the Tech Category

Un-fixing Fixed Elements with CSS Transforms

Published 13 years, 2 months past

In the course of experimenting with some new artistic scripts to follow up “Spinning the Web“, I ran across an interesting interaction between positioning and transforms.

Put simply: as per the Introduction of the latest CSS 2D Transforms draft, a transformed element creates a containing block for all its positioned descendants.  This occurs in the absence of any explicit positioning of the transformed element.

Let’s walk through that.  Say you have a document whose body contains nothing except a position: static (normal-flow) div that contains some absolutely-positioned descendants.  The containing block for those positioned elements will be the root element.  Nothing unusual or unexpected there.

But then you decide to declare div {transform: rotate(10deg);}.  (Or even 0deg, which will have the same result.)  Now the div is the containing block for the absolutely-positioned elements that descend from it.  It’s as though transforming an element force-adds position: relative.  The positioned elements will rotate with their ancestor and be placed according to its containing block — not that of the root element.

Okay, so that’s a little unusual but perhaps not unexpected.  I could make arguments both ways, and some of the arguments could get pretty complex.  To pick one example, if the transformed element didn’t generate a containing block, how would translate transforms be handled?

Either way, here’s where things got really troublesome for me:  a transformed element creates a containing block even for descendants that have been set to position: fixed.  In other words, the containing block for a fixed-position descendant of a transformed element is the transformed element, not the viewport.  Furthermore, if the transformed element is in the normal flow, it will scroll with the document and the fixed-position descendants will scroll with it. You can see my test case, where the red and blue boxes would overlap each other and stay fixed in place, except the second green div has been rotated.

Obviously this makes the fixed-position elements something less than fixed-position.  In effect, not only does the transformed element act as if it’s been force-assigned position: relative, the fixed descendants behave as if they’ve been force-changed to position: absolute.

I find this not only unusual and unexpected, but also a wee bit unsettling.  Personally, I think it goes too far.  Fixed-position elements should be fixed to the viewport, regardless of the transformation of their ancestors.  Of course, if you agree with my thinking there, realize that opens a whole new debate about how, or even whether, transforms of ancestors should be carried to fixed-position descendants.

I have my own intuitions about that, but this is definitely territory where intuitions are to be treated with caution.  There are a lot of interacting behaviors no matter what you do, and no matter what you do someone’s going to find the results baffling in some way or other.

But since I do have intuitions, here’s what they are:  transformed elements in the normal flow or floated do not establish containing blocks for absolutely- and fixed-position descendants.  This means that any transforms you apply to the transformed element are not applied to the positioned descendants, because transforms don’t inherit.

What if you want a normal-flow transformed element to be a containing block?  Use position: relative, same as you would if there were no transform.  And if you want the transforms to be passed on to the descendants even though no containing block is established?  The inherit value would work in some cases, though not all.  That’s where my approach runs aground, and I’m not yet sure how to get it back to sea.

Okay, so that’s what I think.  What do you think?

Results of The Web Design Survey, 2010

Published 13 years, 5 months past

Now available: the results from the A List Apart Survey for People Who Make Web Sites, 2010.  This is the fourth industry snapshot we’ve compiled, and the story that’s emerged over that time is proving to be pretty consistent.  You can get a high-level view from the Introduction, and then dive deeper into the results in the following chapters.  And, as is traditional, the Addendum contains links to the full (anonymized) data set in three formats for your own analytical investigations.  We’d love to see what you come up with!

Something that surprised me quite a bit was that in 2010 we got about half the number of respondents we’ve gotten in past years — not quite seventeen thousand participated in 2010 instead of just over thirty thousand as we saw in previous years.  I’m not quite sure what to make of that.  Is the industry shrinking?  Did we not get the word out as effectively?  Was it a bad time of year to run a survey?  Are people getting tired of taking the survey?  There’s no real way to know.

At least there weren’t any wild swings in the results, which might have indicated we’d lost some subgroups in disproportionate numbers.  Whatever caused the drop in participation, it appears to have done so in an evenly-distributed fashion.

Regardless, I’d like to see higher participation next year, so if anyone has good suggestions regarding how to make that happen, please do let me know in the comments.

We plan to run the 2011 survey in the next couple of months (and I’ll post a bit more about that soon) but for now, I hope you find the 2010 results an interesting and useful look at who we are.

Spinning the Web

Published 13 years, 5 months past

Can CSS create art?  That’s a question I set out to explore recently, and I like to think that the answer is yes.  You can judge for yourself: Spinning the Web, a gallery on Flickr.

cnn

To be clear, when I say “Can CSS create art?” I don’t mean that in the sense of wondering if art, or artful designs, can be accomplished with CSS.  I think we all know the answer there, and have known at least since the Zen Garden got rolling.  What I’m doing here is using some basic CSS to generate art, using web sites as the medium.  For the series I linked, I spun all of the elements on a page using transform: rotate() to see what resulted.  Any time I saw something I liked, I took a screenshot.  After I was done, I winnowed the shots down to the best ones.

As some of you old-schoolers will probably have recognized, I’m absolutely following in the footsteps of Joshua Davis here, and in fact my working title for this effort was “Once Upon a Browser”.  I saw Josh speak years ago, and clearly remember his description of how he generated a lot of his art.  My process is almost identical, albeit with a bit less automation and computational complexity.

Because this is me, I built a little commentary joke into the first images in the series.  It’s not terribly subtle, but with luck one or two of you will get the same chuckle I did.

I’m already thinking about variants on this theme, so there may be more series to come.  In the meantime, as I surf around I’ll stop every now and again to spin what I see.  I’ll definitely mention any new additions via Twitter, and new series both there and here.  And of course if you follow me on Flickr, you’ll see new pieces as they go up.

I hope you enjoy them half as much as I enjoyed creating them.  And if anyone wants to use the originals as desktop wallpapers, as Tim proposed, feel free!

My Own Private HTML5 Survey

Published 13 years, 7 months past

Yesterday, Brandy Fortune asked me on Twitter if there are “any major sites written in HTML 5 now“.  I decided to throw the question to my Twitter gang, and was of course immediately deluged in answers.  Also a small helping of standards politics, which  wasn’t really what I was after but probably should have known was inevitable.  Le sigh.

Anyway, here’s a sampling of the sites most frequently mentioned and how they’re using HTML5, listed in no particular order.

Using new-to-HTML5 markup (and DOCTYPE)

Using HTML5 DOCTYPE but no apparent new-to-HTML5 markup

And then there’s Facebook.  Rumor has it they’re using HTML5 features like the History API while still bearing an XHTML DOCTYPE.  I was also told they use video but all the videos I saw were Flash-based.  It’s possible that more is going on — who knows, maybe Farmville is all HTML5 now — but I was only willing to put up with the user experience for so long.

Some notes:

  • I didn’t run a spider script to verify which HTML5 elements, if any, were being used on a site.  Instead I surfed around using a user stylesheet that highlights HTML5 elements and looked for dashed red outlines.  If they were there, the site got “uses HTML5 markup”.  If I didn’t see any, then “no apparent HTML5 markup”.  This may mean I miscategorized a site or two, in which case sorry.  Even if not, these lists won’t stay current for more than a couple of weeks, so regard this as a single snapshot in time, not the whole movie.
  • In my limited and purely anecdotal peerings, far and away the most commonly-used HTML5 element was section.  nav appeared to run a distant second.
  • Any site that uses font replacement is using HTML5: canvas.  I didn’t list such sites, so bear that in mind.  (Sorry, Beano.)  I just hope such sites change their DOCTYPEs to match.
  • I did not list any site that lacked a DOCTYPE.  I don’t care if the HTML5 DOCTYPE is optional, that doesn’t mean any DOCTYPE-less page is using HTML5.  Or, if it does, my next step is to write a MeyerHTML DTD with an optional DOCTYPE and then charge you all $1 per site for using invalid markup in violation of the terms of the DTD’s license.  And then I’m buying an island.  Oahu seems nice.

Comments are switched off for once partly because I don’t really want another faceful of politics right now, and partly because attempts to post links to other HTML5 sites will end up in the spam trap and frustrate posters.  Feel free to go nuts on your own sites, of course.

Seeing the matrix()

Published 13 years, 7 months past

Over the weekend, Aaron Gustafson and I created a tool for anyone who wants to resolve a series of CSS transforms into a matrix() value representing the same end state.  Behold: The Matrix Resolutions.  (You knew that was coming, right?)  It should work fine in various browsers, though due to the gratuitous use of keyframe animations on the html element’s multiple background images it looks best in WebKit browsers.

The way it works is you input a series of transform functions, such as translateX(22px) rotate(33deg) scale(1.13).  The end-state and its matrix() equivalent should update whenever you hit the space bar or the return key, or else explicitly elect to take the red pill.  If you want to wipe out what you’ve input and go back to a state of blissful ignorance, take the blue pill.

There is one thing to note: the matrix() value you get from the tool is equivalent to the end-state placement of all the transforms you input.  That value most likely does not create an equivalent animation, particularly if you do any rotation.  For example, animating translateX(75px) rotate(1590deg) translateY(-75px) will not appear the same as animating matrix(-0.866025, 0.5, -0.5, -0.866025, 112.5, 64.9519).  The two values will get the element to the same destination, but via very different paths.  If you’re just transforming, not animating, then that’s irrelevant.  If you are, then you may want to stick to the transforms.

This tool grew out of the first Retreats 4 Geeks (which was AWESOME) just outside of Gatlinburg, TN.  After some side conversations betwen me and Aaron during the CSS training program, we hacked this together in a few hours on Saturday night.  Hey, who knows how to party?  Aaron of course wrote the JavaScript.  Early on we came up with the punny name, and of course once we did that the visual design was pretty well chosen for us.  A free TTF webfont (for the page title), a few background images, and a whole bunch of RGBa colors later we had arrived.  Creating the visual appearance was a lot of fun, I have to say.  CSS geeks, please feel free to view source and enjoy.  No need to say “whoa” — it’s actually not that complicated.

So anyway, there you go.  If you want to see the matrix(), remember: we can only show you the door. You’re the one that has to walk through it.

CSS Pocket Reference: The Cutting Room

Published 13 years, 7 months past

I just shipped off the last of my drafts for CSS Pocket Reference, 4th Edition to my editor.  In the process of writing the entries, I set up an ad-hoc test suite and made determinations about what to document and what to cut.  That’s what you do with a book, particularly a book that’s meant to fit into a pocket.  My general guide was to cut anything that isn’t supported in any rendering engine, though in a few cases I decided to cut properties that were supported by a lone browser but had no apparent prospects of being supported by anyone else, ever.

For fun, and also to give fans of this or that property a chance to petition for re-inclusion, here are the properties and modules I cut.  Think of it as the blooper reel, which can be taken more than one way.  I’ve organized them by module because it’s easier that way.

After all that, I imagine you’re going to laugh uproariously when I tell what I did include:  paged and aural properties.  I know — I’m kind of poleaxed by my own double standard on that score.  I included them for historical reasons (they’ve long been included) and also because they’re potentially very useful to a more accessible future.  Besides, if we run out of pages, they’re in their own section and so very easy to cut.

I’m pretty sure I listed everything that I explicitly dropped, so if you spot something that I absolutely have to reinstate, here’s your chance to let me know!

Inconsistent Transitions

Published 13 years, 8 months past

Here’s an interesting little test case for transitions.  Obviously you’ll need to visit it in a browser that supports CSS transitions, and additionally also CSS 2D transforms.  (I’m not aware of a browser that supports the latter without supporting the former, but your rendering may vary.)

In Webkit and Gecko, hovering the first div causes the span to animate a 270 degree rotation over one second, but when you unhover the div the span immediately snaps back to its starting position.  In Opera 11, the span is instantly transformed when you hover and instantly restored to its starting position when you unhover.

In all three (Webkit, Gecko, and Opera), hovering the second div triggers a one-second 270-degree rotation of the span.  Unhovering causes the rotation animation to be reversed; that is, a one-second minus-270-degree rotation — or, if you mouseout from the div before the animation finishes, an rotation from that angle back to the starting position.  Either way, it’s completely consistent across browsers.

The difference is that in the first test case, both the transform and the transition are declared on hover.  Like this (edited for clarity):

div:hover span {
	transition: 1s transform;
	transform: rotate(270deg);
}

In the second test case, the transform and the transition are split up like so:

div span {
	transition: 1s transform;
}
div:hover span {
	transform: rotate(270deg);
}

It’s an interesting set of results.  Only the second case is consistently animated across the tested browsers, but the first case only animates one direction in Webkit and Gecko.  I’m not sure which, if any, of these results is more correct than the other.  It could well be that they’re all correct, even if not consistent; or that they’re all wrong, just in different ways.

At any rate, the takeaway here is that you probably don’t want to apply your transition properties to the hover state of the thing you’re transitioning, but to the unhovered state instead.  I say “probably” because maybe you like that it transitions on mouseover and instantly resets on mouseout.  I don’t know that I’d rely on that behavior, though.  It feels like the kind of thing that programmer action, or even spec changes, will take away.

Same As It Ever Was

Published 13 years, 8 months past

I recently became re-acquainted with a ghost, and it looked very, very familiar.  In the spring of 1995, just over a year into my first Web gig and still just over a year away from first encountering CSS, I wrote the following:

Writing to the Norm

No, not the fat guy on “Cheers.”  Actually, it’s a fundamental issue every Web author needs to know about and appreciate.

Web browsers are written by different people.  Each person has their own idea about how Web documents should look.  Therefore, any given Web document will be displayed differently by different browsers.  In fact, it will be displayed differently by different copies of the same browser, if the two copies have different preferences set.

Therefore, you need to keep this principle foremost in your mind at all times: you cannot guarantee that your document will appear to other people exactly as it does to you.  In other words, don’t fall into the trap of obsessively re-writing a document just to get it to “fit on one screen,” or so a line of text is exactly “one screen wide.”  This is as pointless as trying to take a picture that will always be one foot wide, no matter how big the projection screen. Changes in font, font size, window size, and so on will all invalidate your attempts.

On the other hand, you want to write documents which look acceptable to most people.  How?  Well, it’s almost an art form in itself, but my recommendation is that you assume that most people will set their browser to display text in a common font such as Times at a point size of somewhere between 10 and 15 points.  While you shouldn’t spend your time trying to precisely engineer page arrangement, you also shouldn’t waste time worrying about how pages will look for someone whose display is set to 27-point Garamond.

That’s from “Chapter 1: Terms and Concepts” of Introduction to HTML, my first publication of note and the first of three tutorials dedicated to teaching HTML in a friendly, interactive manner.  The tutorials were taken down a couple of years ago by their host organization, which made me a bit sad even though I understood why they didn’t want to maintain the pages (and deal with the support e-mail) any longer.

However, thanks to a colleague’s help and generosity I recently came into possession of copies of all three.  I’m still pondering what to do about it.  To put them back on the web would require a bit more work than just tossing them onto a server, and to make the quizzes fully functional would take yet more work, and after all this time some of the material is obsolete or even potentially misleading.  Not to mention the page is laid out using a table (woo 1995!).  On the other hand, they’d make an interesting historical document of sorts, a way to let you young whippersnappers know what it was like in the old days.

Reading through them, now sixteen years later, has been an interesting little trip down memory lane.  What strikes me most, besides the fact that my younger self was a better writer than my current self, is how remarkably stable the Web’s fluidity has been over its lifetime.  Yes, the absence of assuredly-repeatable layout is a core design principle, but it’s also the kind of thing that tends to get engineered away, particularly when designers and the public both get involved.  Its persistence hints that it’s something valuable and even necessary.  If I had to nominate one thing about the Web for the title of “Most Under-appreciated”, I think this would be it.

Browse the Archive

Earlier Entries

Later Entries