Posts in the Commentary Category

Customizing Your Markup

Published 12 years past

So HTML5 allows you (at the moment) to create your own custom elements.  Only, not really.

(Ed. note: this post has been corrected since its publication, and a followup clarification has been posted.)

Suppose you’re creating a super-sweet JavaScript library to improve text presentation — like, say, TypeButter — and you need to insert a bunch of elements that won’t accidentally pick up pre-existing CSS.  That rules span right out the door, and anything else would be either a bad semantic match, likely to pick up CSS by mistake, or both.

Assuming you don’t want to spend the hours and lines of code necessary to push ahead with span and a whole lot of dynamic CSS rewriting, the obvious solution is to invent a new element and drop that into place.  If you’re doing kerning, then a kern element makes a lot of sense, right?  Right.  And you can certainly do that in browsers today, as well as years back.  Stuff in a new element, hit it up with some CSS, and you’re done.

Now, how does this fit with the HTML5 specification?  Not at all well.  HTML5 does not allow you to invent new elements and stuff them into your document willy-nilly.  You can’t even do it with a prefix like x-kern, because hyphens aren’t valid characters for element names (unless I read the rules incorrectly, which is always possible).

No, here’s what you do instead :

  1. Wrap your document, or at least the portion of it where you plan to use your custom markup,Define the element customization you want with an element element.  That’s not a typo.
  2. To your element element, add an extends attribute whose value is the HTML5 element you plan to extend.  We’ll use span, but you can extend any element.
  3. Now add a name attribute that names your custom “element” name, like x-kern.
  4. Okay, you’re ready!  Now anywhere you want to add a customized element, drop in the elements named by extends and then supply the name via an is attribute.

Did you follow all that?  No?  Okay, maybe this will make it a bit less unclear.  (Note: the following code block was corrected 10 Apr 12.)

<element extends="span" name="x-kern"></element>
<h1>
<span is="x-kern" style="…">A</span>
<span is="x-kern" style="…">u</span>
<span is="x-kern" style="…">t</span>
<span is="x-kern" style="…">u</span>
mn
</h1>
<p>...</p>
<p>...</p>
<p>...</p>

(Based on markup taken from the TypeButter demo page.  I simplified the inline style attributes that TypeButter generates for purposes of clarity.)

So that’s how you create “custom elements” in HTML5 as of now.  Which is to say, you don’t.  All you’re doing is attaching a label to an existing element; you’re sort of customizing an existing element, not creating a customized element.  That’s not going to help prevent CSS from being mistakenly applied to those elements.

Personally, I find this a really, really, really clumsy approach — so clumsy that I don’t think I could recommend its use.  Given that browsers will accept, render, and style arbitrary elements, I’d pretty much say to just go ahead and do it.  Do try to name your elements so they won’t run into problems later, such as prefixing them with an “x” or your username or something, but since browsers support it, may as well capitalize on their capabilities.

I’m not in the habit of saying that sort of thing lightly, either.  While I’m not the wild-eyed standards-or-be-damned radical some people think I am, I have always striven to play within the rules when possible.  Yes, there are always situations where you work counter to general best practices or even the rules, but I rarely do so lightly.  As an example, my co-founders and I went to some effort to play nice when we created the principles for Microformats, segregating our semantics into attribute values — but only because Tantek, Matt, and I cared a lot about long-term stability and validation.  We went as far as necessary to play nice, and not one millimeter further, and all the while we wished mightily for the ability to create custom attributes and elements.

Most people aren’t going to exert that much effort: they’re going to see that something works and never stop to question if what they’re doing is valid or has long-term stability.  “If the browser let me do it, it must be okay” is the background assumption that runs through our profession, and why wouldn’t it?  It’s an entirely understandable assumption to make.

We need something better.  My personal preference would be to expand the “foreign elements” definition to encompass any unrecognized element, and let the parser deal with any structural problems like lack of well-formedness.  Perhaps also expand the rules about element names to permit hyphens, so that we could do things like x-kern or emeyer-disambiguate or whatever.  I could even see my way clear to defining an way to let an author list their customized elements.  Say, something like <meta name="custom-elements" content="kern lead follow embiggen shrink"/>.  I just made that up off the top of my head, so feel free to ignore the syntax if it’s too limiting. The general concept is what’s important.

The creation of customized elements isn’t a common use case, but it’s an incredibly valuable ability, and people are going to do it.  They’re already doing it, in fact.  It’s important to figure out how to make the process of doing so simpler and more elegant.


Vigilance and Victory

Published 12 years, 2 months past

After the blackout on Wednesday, it seems that the political tides are shifting against SOPA and the PROTECT IP Act — as of this writing, there are now more members of Congress in opposition to the bills than in favor.  That’s good news.

I wil reiterate something I said on Twitter, though:  the members of tech community, particularly those who are intimately familiar with the basic protocols of the Internet, need to keep working on ways to counteract SOPA/PIPA.  What form that would take, I’m not sure.  Maybe a truly distributed DNS system, one that can’t be selectively filtered by any one government or other entity.  I’m not an expert in the area, so I don’t actually know if that’s feasible.  There’s probably a much more clever solution, or better still suite of solutions.

The point is, SOPA and PIPA may soon go down to defeat, but they will return in another form.  There is too much money in the hands of those who first drafted these bills, and they’re willing to give a fair chunk of that money to those who introduced the bills in Congress.  Never mistake winning a battle with winning the war.  As someone else observed on Twitter (and I wish I could find their tweet now), the Internet community fought hard against the DMCA, and it’s been US law for more than a decade.

By all means, take a moment to applaud the widespread and effective community effort to oppose and (hopefully) defeat bad legislation.  When that’s done, take notes on what worked and what didn’t, and then prepare to fight again and harder.  Fill the gap between battles with outreach to your elected representatives and with efforts to educate the non-technical in your life to explain why SOPA/PIPA were and are a bad idea.

Days of action feel great.  Months of effort are wearying.  But it’s only the latter that can slowly and painfully bring about long-term change.


Standing In Opposition

Published 12 years, 2 months past

Though I certainly do not support SOPA or the PROTECT IP Act (the complete, rather contrived acronym of PIPA), I will not be blacking out meyerweb.  This is largely because the vast majority of my readers already know about these bills, and very likely oppose them; as for anyone who visits but does not know about these bills, I feel I’ll do better to speak out than to black out.  (Which is not a criticism of those who do black out.  We all fight in our own ways.)

Instead, I will reproduce here the letter I attempted to send via contact form to my state Senator this morning, and which I will print out and send by regular postal service later today.

Senator Brown:

I grew up in Lexington, Ohio.  I moved to Cleveland in pursuit of a career, and found success.  Through a combination of good luck and hard work, I have (rather to my surprise) become a widely recognized name in my field, which is web design and development.  Along the way, I co-founded a web design conference with an even more widely respected colleague that has become one of the most respected and successful web design events in the world.  This business is headquartered in Ohio — I live in Cleveland Heights with my family, and I intend to stay here until I either retire to Florida or die.  Politically I’m best described as a moderate independent, though I do tend to lean a bit to the left.

As you can imagine, given my line of work, I have an opinion regarding the PROTECT IP Act which you have co-sponsored.  The aims of PROTECT IP are understandable, but the methods are unacceptable.  Put another way, if you wish to combat piracy and intellectual property theft, there are far better ways to go about it.

As someone with twenty years of technical experience with the Internet and nearly as many with the web — I started creating web pages in late 1993 — please believe me when I say the enforcement mechanisms of the bill are deeply flawed and attack the very features of the Web that make it what it is.  They are akin to making a criminal of anyone who gives directions to a park where drug trafficking takes place, regardless of whether they knew about the drug trafficking.  You don’t have to be in favor of drug trafficking to oppose that.

This is not a case where tweaking a clause or two will fix it; correction in this case would mean starting from scratch.  Again, the objection is not with the general intent of the bill.  It is with how the bill goes about achieving those aims.

If you would like to discuss this with me further, I would be delighted to do whatever I can to help, but in any event I strongly urge you to reconsider your co-sponsorship of the PROTECT IP Act.

Thank you for your time and consideration.

Eric A. Meyer (http://meyerweb.com/)

Partner and co-founder, An Event Apart (http://aneventapart.com/)

If you agree that the PROTECT IP Act is poorly conceived, find out if your senator supports PIPA.  If they do, get in touch and let them know about your opposition.  If they oppose the bill, get in touch and thank them for their opposition.  If their support or opposition isn’t known, get in touch and ask them to please speak out in opposition to the bill.

As others have said, postal letters are better than phone calls, which are in turn better than e-mail, which is in turn better than signing petitions.  Do what you can, please.  The web site you save might be your own.


App Shopping

Published 13 years, 9 months past

While I agree with Neven Mrgan’s Walled Gardens, I feel like the whole imagery of walled gardens is a bit of a metaphorical stretch — not because it’s inaccurate, but because it’s fundamentally unnecessary.  We don’t need metaphors here.

That’s because the iTunes App Store is just what its name states: it is a store.  That has a fairly specific and intentional meaning in the world of commerce.  It means that the stock is not infinite and that someone has screened it.

Think of visiting a store in the real world.  Not a small shop, but a store.  Something large (or at least largish) with lots of things to buy.  Macy’s.  Target.  Wal-Mart.  Or even the local hardware and general store in a small town, where there’s more than just tools and nails and bags of cement mix.

You go there to buy things because it’s a central location for buying a lot of things.  But inherent in the experience is that what you find on the shelves has been selected and vetted by the person or people running the store.  That doesn’t just mean favoring one brand of soap over another, but also deciding what to carry at all.  Your hardware store doesn’t sell flat-panel HDTVs.  Macy’s doesn’t stock six-inch PVC pipe.  Target doesn’t offer porn.  They have all selected some things to carry and rejected, if only implicitly, others.  Certain brands are not carried because their quality didn’t meet the proprietor’s standards, didn’t fit the store’s audience and brand, or weren’t sufficiently profitable to claim valuable shelf space.

This is an assumption about stores that we hardly notice except when it’s clearly not so.  If you’ve ever stepped into a store where it’s fairly obvious that everything, and I mean everything, the owner has ever come across in their life has been thrown onto the shelves on the theory that hell, it might look like junk but you never know what might be valuable to somebody, and you know what I mean.  We subconsciously expect that a store will offer wares which have been screened for quality and price, all conveniently collected in one place for our purchase.

So it is with the App Store.  It’s a central location for iPhone and iPad owners to go shop for apps.  The stock is large — too large for any physical store to handle — but it is still screened.  You may not like the screening criteria, just as you may not like the screening criteria exercised at Wal-Mart, but it exists nonetheless.

In the desktop computing world, of course, no such control exists.  There you find and collect applications wherever you find them, whether in a store or somewhere on the internet.  This is much the same as doing your shopping by driving around to garage sales and flea markets.  Taken as an aggregate, there’s no quality control, no screening, no organization.  It’s catch as catch can.

There’s room in the world for both models, of course.  Some people avoid stores in favor of flea markets and yard sales and the like because that’s what they prefer.  Others go to stores and avoid garage sales because they prefer the more controlled experience.  In fact, think about everyone you know.  How many prefer store shopping, and how many prefer flea market shopping?  In that light, the iTunes Store’s success is really no mystery.  It’s not just curated computing, which some have derided.  It’s curated shopping, a model which has already proven wildly popular.  More than that, it’s simple and cheap curated shopping, which is approximately the square of two wildly popular models.

You may say that there’s a significant difference between the physical world and the iTunes App Store.  If the real world were like iPhone/iPad ecosystem, there would only be one store in the whole world.  Everyone would have to shop there, and any merchant who couldn’t get in would be out of business for lack of customers.  In the real world, we can go to any store we like:  each is curated, but we can shop at the stores that offer what we like (read: that curate in a manner we find pleasing) and not the ones that don’t.  The App Store is the only place to shop.

But that’s only true if you believe that the iPhone/iPad is the only mobile ecosystem in town, which is an assumption a weirdly large number of Apple’s critics seem to make.  In fact, you’re perfectly free to join other ecosystems and shop at other stores.  Android has one, for example.  There are others.  If you don’t like what Apple offers you, then you can shop somewhere else, as many people do.

But let’s assume that you’re personally invested in the iPhone/iPad ecosystem and can’t for some reason avoid or leave it.  In that case, you’re stuck with that one single store, the App Store.

Except that’s only true because until now, nobody has launched an alternate store that offers web stack applications (WSAs).  Maybe that’s because nobody is really building WSAs yet, at least not in numbers large enough to justify building a store to sell them.  But then, maybe developers aren’t building WSAs because there’s no central place to sell them.  The centralization of stores is at least as attractive to sellers as to shoppers.  That’s a driver behind the recent announcements from Google and Mozilla, though as yet they’re just announcements.

A WSA store organized along lines similar to the App Store could do very, very well.  It would need to make the shopping and, more importantly, purchasing experiences as frictionless as possible; this is something the iTunes Store has definitely gotten right.  But suppose someone built a great WSA store and sold WSAs on a 20% commission.  How many developers might look at that and figure that the extra 10% was worth making a shift?

It certainly wouldn’t be as easy as just setting up a store and building a Scrooge McDuck vault; no, there would be many challenges, but nothing truly insurmountable.  Of that I am certain.  And the great thing is that, just like in the physical world, there’s room for multiple stores — boutique app shops, if you like.  Maybe one specializes in games; another in parent- and kid-centric apps; another in productivity apps; yet another in the “naughty” apps Apple booted out of its ecosystem a while back.  (I call them “fapps” for obvious reasons.)  Maybe these are app shops instead of app stores, but then, any large population can support a whole lot of shops.  They can coexist with any number of other stores, including those from Apple and Google and Mozilla and anyone else.

None of these WSA stores and shops would be able to sell native apps, but that’s less of an obstacle than many seem to think.  The window between native app behavior and WSA behavior has narrowed at an astonishing rate recently, and will continue to do so.  I’m not saying that you can do absolutely anything with a WSA that you can do in native code, of course, but a lot of native apps could have been done as WSAs.  Could still be done that way, in fact.

That points to the other advantage of a WSA store: it’s not limited to the iPhone/iPad ecosystem.  A well-written WSA can run in multiple ecosystems.  Being based on web technologies, they can (for the most part) go where the web goes.  The market is suddenly much bigger than the iTunes Store, much bigger than people carrying around Apple devices.  Much bigger than the people carrying around Droids, for that matter.  With WSAs, developers can sell in multiple ecosystems at once, using the most successful cross-platform technology since ones and zeros.

Besides which, in a very real sense, WSAs are not cross-platform apps.  They’re web platform apps that run in a native app that provides a window from a mobile ecosystem into the web.  We call that app a web browser, but it’s becoming more than that, and faster than many would have credited even six months ago.  The opportunities are beyond enormous.

For starters, imagine this: you have bought a number of apps at your favorite WSA store and installed them on your iPhone.  Then you find out you can finally get the hell off AT&T and move to a Verizon iPhone.  When you do that, the WSA store lets you install the apps you’ve already bought on your new ViPhone.  If it’s sufficiently smart, it will even migrate their data for you by way of the store itself.  Then, two years later, you decide you’ve had enough of Apple and want to move to another smartphone.  Once again, your apps and data go with you.

This is what the web stack makes possible.  If you thought mobile number portability was cool, imagine what you’ll think of mobile app portability.


Inspector Scrutiny

Published 14 years, 1 month past

It’s been said before that web inspectors — Firebug, Dragonfly, the inspectors in Safari and Chrome, and so forth — are not always entirely accurate.  A less charitable characterization is that they lie to us, but that’s not exactly right.  The real truth is that web inspectors repeat to us the lies they are told, which are the same lies we can be told to our faces if we ask directly.

Here’s how I know this to be so:

body {font-size: medium;}

Just that.  Apply it to a test page.  Inspect the body element in any web inspector you care to fire up.  Have it tell you the computed styles for the body element.  Assuming you haven’t changed your browser’s font sizing preferences, the reported value will be 16px.

You might say that that makes sense, since an unaltered browser equates medium with “16”.  But as we saw in “Fixed Monospace Sizing“, the 16px value is not what is inherited by child elements.  What is inherited is medium, but web inspectors will never show you that as a computed style.  You can see it in the list of declared styles, which so far as I can tell lists “specific values” (as per section 6.1 of CSS2.1).  When you look to see what’s actually applied to the element in the “Computed Styles” view, you are being misled.

We can’t totally blame the inspectors, because what they list as computed styles is what they are given by the browser.  The inspectors take what the browser returns and prettify it for us, and give us ways to easily alter those values on the fly, but in the end they’re just DOM inspectors.  They don’t have a special line into the browser’s internal data.  Everything they report comes straight from the same DOM that any of us can query.  If you invoke:

var obj = document.getElementsByTagName('body')[0];
alert(getComputedStyle(obj,null).getPropertyValue('font-size'));

…on a document being given the rule I mentioned above, you will get back 16px, not medium.

This fact of inspector life was also demonstrated in “Rounding Off“.  As we saw there, browsers whose inspectors report integer pixel values also return them when queried directly from the DOM.  This despite the fact that it can be conclusively shown that those same browsers are internally storing non-integer values.

Yes, it might be possible for an inspector to do its own analysis of properties like font-size by checking the element’s specified values (which it knows) and then crawling up the document tree to do the same to all of the element’s ancestors to try to figure out a more accurate computed style.  But what bothers me is that the browser reported computed values that simply aren’t accurate in the first place.  it seems to me that they’re really “actual values”, not “computed values”, again in the sense of CSS2.1:6.1.  This makes getComputedStyle() fairly misleading as a method name; it should really be getActualStyle().

No, I don’t expect the DOM or browsers to change this, which is why it’s all the more important for us to keep these facts in mind.  Web inspectors are very powerful, useful, and convenient DOM viewers and editors, essentially souped-up interfaces to what we could collect ourselves with JavaScript.  They are thus limited by what they can get the browser to report to them.  There are steps they might take to compensate for known limitations, but that requires them to second-guess both what the browser does now and what it might do in the future.

The point, if I may be so bold, is this:  never place all your trust in what a web inspector tells you.  There may be things it cannot tell you because it does not know them, and thus what it does tell you may on occasion mislead or confuse you.  Be wary of what you are told — because even though all of it is correct, not quite all of it is true, and those are always the lies that are easiest to believe.


A Matter of Conscience

Published 14 years, 5 months past

So Louisiana Justice of the Peace Keith Bardwell has gained national notoriety for refusing to issue a marriage license to an interracial couple, referring them instead to another justice to have the marriage performed.  His action has, of course, provoked a great deal of condemnation.  Pretty much every elected Louisiana official above Mr. Bardwell (and plenty of them to either side) in the administrative hierarchy has called for his removal from his position.  That goes all the way up to Republican Governor Bobby Jindal, who said:

“This is a clear violation of constitutional rights and federal and state law. Mr. Bardwell’s actions should be fully reviewed by the Judiciary Commission and disciplinary action should be taken immediately – including the revoking of his license.”

As for Mr. Bardwell himself, he has claimed not to be racist, but instead concerned for the biracial children that result from mixed-race marriage.  Of all that he’s said, though, I was particularly interested by the following:

“I didn’t tell this couple they couldn’t get married. I just told them I wouldn’t do it.”

It interested me because it’s exactly the kind of reasoning that underlies “conscience protection” laws that exempt medical professionals who wish to refuse participation in abortion, or dispensation of contraception.

So now I’m very curious to know whether what pro-life groups have to say about what this man has done and how he’s done it.  Or, for that matter, what Governor Jindal himself now thinks of the bill he recently signed into law.


Nine Into Five

Published 14 years, 6 months past

Like so many others, I had tried to dig into the meat of HTML5 and figure out just what the heck was going on.  Like so many others, I had come away with my head reeling from the massive length and depth of the often-changing specification, unsure of the real meaning of much of what I had read.  And like so many others, I had gone to read the commentary surrounding HTML5 and come away deeply dispirited by the confusion, cross-claims, and rancor I found.

Then I received an invitation to join a small, in-person gathering of like-minded people, many of them just as confused and dispirited as I, to turn our collective focus to the situation and see what we found.  I already had plans for the meeting’s scheduled dates.  I altered the plans.

Over two long days, we poked and prodded and pounded on the HTML5 specification—doing our best to figure out what was meant by, and what would result from, this phrase or that example; trying to reconcile seemingly arbitrary design choices with what we knew of the web and its history and the stated goals of the HTML5 specification; puzzling over the implications of example code and detailed algorithms and non-normative notes.

In the end, we came away with a better understanding of what’s going on, and out of that arose some concerns and suggestions.  But in the main, we felt much better about what’s going on in HTML5, and have now said so publicly.

Personally, there are two markup changes I’d like most to see:

  1. The content model of footer should match that of header. As others have said, the English-language name of the footer element creates expectations about what it is and how it should work.  As the spec now stands, most of those expectations will be wrong.  To wit: if your page’s footer includes navigation links, and especially if you have an HTML5-structured “fat footer“, you can’t use footer to contain it.

    If this feels a little familiar, it should: the same problem happened with address, which was specified to mean only the contact information for the author of a page.  It was quite explicitly specified to not accept mailing addresses.  Of course, tons of people did just that, because they had an address and there was an address element, so of course they went together!

    A lot of us cringed every time this came up in the last ten years of conducting training, because it meant we’d have to spend a few minutes explaining that the meaning of the element’s name clashed with its technical design.  We saw a lot of furrowed brows, rolled eyes, and derisively shaken heads.  That will be magnified a millionfold with footer if things are allowed to stand as they are.

    As I said, the fix is simple: just change the content model of footer to state:

    Flow content, but with no header or footer element descendants.

    That’s exactly the same content model as header, and for the same reasons.

  2. time needs to be less restrictive.  That’s not very precise, I know.  But as things stand now, you can only apply time to Gregorian datetimes, and you’re not supposed to use it for anything that couldn’t be easily represented in a calendaring program.  The HTML5 specification says:

    The time element is not intended for encoding times for which a precise date or time cannot be established.

    That makes me wonder, in a manner not at all like Robert Plant, how precise do we have to be?  The answer, I’m sorry to say, is too much.

    To pick an example: I have what I think of as a great use case for the time element, and while it uses the Gregorian calendar, it’s only accurate to whole months (as is Wikipedia’s version).  In some cases I could get the values down to specific days; but in others, maybe not.  So I can’t use the datetime attribute, which requires at least year-month-day, if not actual hours and minutes.  I could omit the attribute, and just have this:

    <time>October 2007</time>
    

    In that case, the content has to be a valid date string in content—which is to say, a valid date string with optional whitespace.  So that won’t work.

    I’ve pondered how best to tackle this, as did the Super Friends.  Our suggestion is to allow bare year and month-day values as permitted in ISO8601.  In addition, I think we should allow a valid date string to only require a year, with month, day, and time optional.  That seems good enough as long as we’re going to go with the idea that the Gregorian calendar contains all the time we ever want to structure.

    But what about other, older dates, some of which are fairly precisely known within their own calendars?  On that point, though the historian in me clamors for a fix, I’m uncertain as to what.  PPK, on the other hand, has put alot of thought into this and written a piece that I have skimmed but never, perhaps ironically, found the time to read in its entirety.

These are not my only concerns, but they’re the big ones.  For the rest, I concur with the hiccups guide, though of course to varying degrees.  I’m still trying to decide how much I care (or don’t) about the subtle differences between article and section, for example, or the way aside fits (or doesn’t) with its cousin elements.  And dialog just bugs me, but I’m not sure I have a better proposal, so I’ll leave it be for the time being.

At the other end of the two days, I felt a good deal more calm and hopeful than I did going in.  As Jeffrey said, “the more I study the direction HTML5 is taking, the better I like it”.  While there are still rough edges to be smoothed, there is time to smooth them.  We’ve already seen responsiveness on some of the points we addressed in the hiccups guide, and discussions around others.  The specification itself is daunting, especially to those who might remember the compact simplicity of the HTML2 spec.  Fortunately, it has good internal cross-linking so that you can, with effort, track down exactly what’s meant by “valid date string with optional time” or “sectioning content” or “formatBlock candidate“.

With HTML5, the web is not ending, nor is it starting over.  It’s evolving, slowly and in full view of the public, with an opportunity for anyone to have their say (which is not, of course, the same as having one’s proposals accepted).  It’s the next step, and I feel quite a bit more confident that it’s a step onto solid ground.


CSS3 Feedback: Graphical Thoughts

Published 15 years, 1 month past

(This is part of the Feedback on ‘WaSP Community CSS3 Feedback 2008′ series.)

My few thoughts on the “Graphical Effects” part of the feedback document.  A lot of what was mentioned by the community is already in the pipeline, so there’s not a lot to say about those except “hurry ’em up, willya?”.

Gradients — like rounded corners, no surprise these came up.  (All we need is to define wet-floor-reflect and we’ll complete the Web 2.0 design tricks hat trick.)  I’d like to see them myself, and I don’t think defining them is quite as hard as the commentary implies:

Imagine, for example, applying a gradient to the text of a <span> broken across two lines. Do you apply the gradient to each part individually? Glue them together as if they were all on one line first? Draw a rectangle around both parts and apply the gradient to that? (CSS3 Backgrounds and Borders has a control for this.)

I’d say the answer is right there, in the form of background-break, but let’s assume for a moment that said property never existed and we still had to deal with this problem.  I can think of two solutions:

  1. Only allow gradients to be applied to non-inline boxes.  This would not be my preference, but it could be so defined.  There’s already precedence with CSS for that sort of limitation:  width, height, text-align, and other properties are restricted to non-inline boxes.
  2. Treat gradients the way backgrounds and borders are already treated on inline boxes.  I’d be much more in favor of this.  In other words, lay out the inline box as though it is all on one line and then break it in pieces as needed to fit into the actual text flow.  (This is the behavior of continuous, the default value of background-break.)

But since background-break exists, you just treat gradients as you would any other background in accordance with background-break‘s definitions.

The somewhat trickier problem is how to define the value syntax for background-gradient so that’s both powerful and extensible without being unusable.  I think that’s solvable, but not easily, and probably not in a way that will satisfy everyone.

(Though this would be a fabulous place for the cardinal-point values from pre-CSS1 days, which you can still find in the specification if you look hard enough, to make a roaring comeback, wouldn’t it?)

Unidirectional background repeats — I say yes.  Here, have some values: repeat-up, repeat-right, repeat-down, and repeat-left.  In each case, the image would be repeated in the indicated direction from the origin image (the one placed by background-position).  Ironically, really old versions of IE did half of this by not correctly supporting repeat-x and repeat-y, treating them instead as if they were repeat-right and repeat-down.

There are occasions where this would be very useful, especially if you can combine the values into something like repeat-down repeat-right, and most especially in conjunction with multiple backgrounds.  So you could put an image stripe across the top of the element background, another one down the left side, and then fill in the rest of the background with a repeat-down repeat-right image.  Not a particularly common case, but the only way to handle it at present is with multiple nested elements, each with its own background and possibly a lot of negative margin trickery, and nobody wants that.  (Which may also be why it isn’t a particularly common case.)

You could also put an image in the center of your page and then a single stripe that goes only downward from behind it.  Like a golf ball on a tee, say; or a tree trunk below the leafy crowm; or a stem from a flower.

Slanted corners — sure, why not?  The issues are all the same as with rounded corners; the only difference is that you have a flat corner instead of a rounded one.  It makes joins between different borders styles/colors more obvious, but that’s a good thing: any solution that works well for the slant corner should work as well for the rounded corner.  Besides, if we’re already going to the effort of rounding corners, this seems like a pretty easy add-on.

Multiple borders — I think this would be quite useful.  I occasionally fake this with a border and an outline (as in my diagnostic styles) but that only works for two; if you want three or more nested borders (or two or more in IE/Win) you have to start nesting elements.  Also, having multiple borders lets you define your own gradient borders like you were a pixel artist, and who doesn’t like pixel artists?

At the same time, though, I do feel that this should be fairly low on the implementation totem pole.  And, as pointed out in the document, if image borders get implemented then a lot of the need for multiple borders goes away.

Alpha channel image masks — the problem I have here is what happens if you, say, try to use an image to alpha-mask a non-replaced element?  How does it scale?  Or does it?  Will there be a mask-stretch property?  Who really wants to stretch an image over a great big div anyway?  (From a visual-results point of view, I mean.)

Allowing masks might help in figuring out how to do non-rectangular float areas, in that you could use the alpha image to define the area used for float exclusion.  Combine that with a stretch ability and SVG support, so you can draw scalable vector masks, and I think you’re really getting somewhere.  (As does Matt Wilcox; he and I have been chewing this over in the comments on the previous post in the series.)


Browse the Archive

Earlier Entries

Later Entries