This is the story of a guy and his brain. While sitting in bed one early Sunday morning, a geeky thought strikes him. He wonders what properties or attributes designers would pick if they could have one implemented from HTML5 or CSS3 today. The comments should be where all the action happens, hopefully.
If you’ve read (and hopefully got a giggle out of) my browser manifesto, you would have seen that I truly consider this to be a great time to be a designer. And after seeing the awesome commentary of the last entry, I wanted to pose a question that i hope spawns some more discussion.
If you could have one HTML5/CSS3 property or attribute added into every modern browser today, what would it be?
Usually at this point I’d make an excuse to post two things, but I’ll play it clean and only state one. The first one that comes to mind is text-shadow.
When I talked about Distortion’s design process a few weeks ago, I believe I mentioned that the shadow whoring you see before you was the result of adding a drop shadow to mock copy in the fifth prototype. Albeit a bit more subtle than some of the other design elements that make up this version (am I allowed to use the word subtle and “this version” in the same sentence?), it is one of my favorite parts. I’ll look at Safari versus Firefox and frown like a sad panda because Firefox doesn’t support text-shadow. All the bitmap elements have drop shadows, why shouldn’t the text? (It also sort of bothers me that you can’t add a shadow to the bullets of an unordered list, but that’s just getting picky.)
So with that, what’s your wish? :)
Only one? There’s nothing very useful in any singular attribute, just the graphical fluff ones. What I wouldn’t give for CSS Variables (but enhanced to do some Math, the current proposal is, unsurprisingly, disappointingly under specified).
OK, just one attribute? With HTML it’d be the “data-” attribute, which can be placed on any HTML element. But back-ported from HTML5 to XHTML. It would allow all sorts of cool stuff.
For CSS, I’m not very interested in any single attribute. We’re still at the ‘get some modules out that are actually useful to designers’ stage, individual attributes seem like fine-detail when we’ve still got great swaths of work to be done.
CSS 3 - multiple background images per element. HTML 5 - new type attributes on input elements (datetime, number, email)
Definitely border-radius. I hate making images for anything with rounded corners … bleeeh.
The CSS3 advanced layout module would be my pick; without a doubt.
Oops, I didn’t realise that I was limited to one attribute/property. I’ll chime in with Ben’s vote for border-radius. It really isn’t nice to resort to superfluous spans or javascript when dealing with rounded corners on IE.
I’ll second Matt (Wilcox) - for once, hehe, because I think he’s right: looking over the specs - there really isn’t one attribute that I have a burning need for at the moment.
Mmm, the ‘layout’ stuff looks like it could be an interesting improvement.
HTML5 suggests it will have a bigger impact than CSS 3 really….(I’m looking forward to both, but HTML5 is the bigger shift!)
Drop shadows? Haven’t those jumped the shark (along with rounded corners)? I pick the HTML5 media (specifically VIDEO) element. Boo-ya, baby: http://www.whatwg.org/specs/web-apps/current-work/#video
I would have posted something about HTML5, but to be honest, I haven’t really psyched myself up by reading the documentation yet. In retrospect, I see my error in limiting the choice to one—buttt, that’s what you get for blogging while sleepy and tipsy.
And drop shadows haven’t jumped the shark. Neither have gradients and rounded corners. People use them in such bad ways so frequently that it seems like it has.
Uhm… for CSS3 I’d definitely ask for TTF support, just like in the good old days. Would be something like {font:url(whatever.ttf);}.
Dunno, just think it would be such an improvement to web design, without having to use dynamic image replacement or sIFR.
I was going to say column support for text elements, but that’s already in the works.
For HTML5, an improvement would be text flow from one P element to another no matter where they are placed on the page. That, combined with the CSS column attribute would be wicked for creating magazine layouts on webs.
(sorry for my english, but I’m spanish :P)
I would totally go for the
make-awesome: true;CSS property. Yeah, that would be great. (Currently it’s only supported in my imaginary browser)But honestly, that’s a tough question Bryan. I guess if I have to pick one, I’d say full
background:support in CSS, meaning multiple backgrounds and whatnot. That would be really nifty.I’d like to see CSS variables get implemented. That would make maintaining/tweaking color schemes for designs much much easier. Variables plus some basic math/color operations would be a dream come true.
Multiple background images added into every modern browser today would have me running out my office to order a pint of guinness to celebrate.
“People use them in such bad ways so frequently that it seems like it has.”
True dat.
I see that everyone is asking for css variables to be added into the mixed, but is this not a set backwards and away from separation. Were would it stop if that basic logic was added to stylesheets docs, soon developers would so starting asking for conditional blocks and exception/rescue clauses.
As for my property, I would love to see web fonts support in all the major clients out there and not just Safari 3.1.
With HTML5, the new section tags are going to rock. Having the ability to call a markup a footer in “footer%s/footer” tags is great. This would bring XHTML closer to the xml format. I guess maybe then and only then would be a good idea to move css closer to how XSLT function. i.e. variables, animation and the likes.
Multiple background images, without a doubt. I absolutely hate having to add extra markup to accomplish something when multiple bg images would let me do the same thing.
I might say text-shadow if I really used it a lot, but since I don’t (yet) and because you already voted for it, I’ll go with multiple background images.
Sure, CSS variables could be useful, but that’s really easy to achieve programatically by dynamically generating your stylesheet (perhaps not ideal for everyone, but not terribly difficult either, and is possible with the current spec).
Advanced layout may indeed make things easier, but I also believe it will make life more difficult to start with once it comes along (just imagine how long it will take browsers to properly support it, and even then we’ll likely be dealing with bugs/workarounds/hacks/etc.)
So multiple background images would do two things: remove the need for a lot of unnecessary markup, and encourage designers to experiment with layering that they might currently avoid.
@but is this not a set backwards and away from separation
How so? There’s no need whatsoever for your statement to be true. I’m sorry, but the plain and simple fact of the matter is that visual design is often based on mathematical relationships between elements. And CSS doesn’t allow you to do maths calculations on the fly - you have to ‘pre-bake’ all of the dimensions. And for some layouts, that means CSS isn’t a viable solution. The variables and maths we’re talking about have nothing to do with the content. They are all about the presentation of the content. There is no ‘seperation’ issue here.
We should be able to do anything we want in CSS - including complex math, variables (true variables), and constants. But only in order to provide values for use with CSS attributes. None of this would be able to effect the content of the page, only how it’s displayed. But hell yes, I want far more from CSS than the horribly limited and over simplified stuff we have at the moment.
PS - my apologies if my frustration shows through in that last post. I’ve been a long time involved with HTML5/CSS and the ongoing situation with both of these technologies still frustrates me. We could have things so much better if only the W3C were less bureaucratic and not governed by browser manufacturers.
@matt don’t worry about the way you came off:
1st. there is no way you can hurt my feelings, everyone can bring their opinion to the pot. Throwing a counter point is better then name calling.
2nd. I was not talking about the separation between content and presentation, but rather function and presentation. CSS Variables, CSS Animation and the likes are common place in client-side scripting. I.e. Javascript. Correct me if I am wrong, but aren’t CSS roots based in print best practices. CSS was created to give a designer complete control over the content like that on a print page.
Separation for structure (HTML), presentation (CSS), Logic (Javascript) is the standard, right. As we start to port logic into the style information, don’t we start dirtying the standard and create the same issue that we had with style information be in the HTML? I guess that this is not so much and issue for CSS Variables, I do understand their applied use.
So I guess that my statements and questions are more aimed at other function additions. I and like I said if that happens, where does it stop. Do we next start advocating if/else blocks and switch statements.
Either way Matt, Thanks for all the work you are doing with HTML5/CSS3. I wouldn’t mind hearing more on your insight into it all.
CSS3 would definitely by multiple backgrounds per element, and I’m not sure about HTML5. :(
XHTML 2 for the win.
hey there, my design superhero!
straight to the point, i agree with kevin selles’s wish. i would like, very much, to have a special attribute to display whatever font that I like in my website without having to use sIFR
@ regi e
Thanks, I’m glad you didn’t take offence.
With regard to point 2: Ah yes, but it’s not about ‘function’. CSS is about presentation, JavaScript is about interaction behaviour. It’s perfectly reasonable to want ‘function’ purely on the display layer, and that’d be fine as long as the functions in question are based purely on display logic and are not effected by user interaction or behaviour.
JavaScript is about doing things in response to the user. Doesn’t matter what it is, as long as it’s in response to the user. But display stuff can be done without any user interaction. I may need to work out block dimensions for example. I see the two as separate, but I still want the ability to inspect arbitrary elements and perform maths and logic branching on both.
Also, CSS wasn’t as far as I am aware about print first. There’s a certain amount of logic taken from the print world certainly, after all we’re talking about a technology over a decade old, conceived when no one had any clue about the requirements designers would have in a new medium. But it’s not explicitly about print best practice, and even if that were the root of CSS, that’s not what it should be about now. Times change, requirements change.
I wrote a blog entry expanding on my thoughts if you are interested: http://mattwilcox.net/archive/entry/id/991/
Improved CSS psudo selectors, either :even or :odd. Hell, I’d even settle for :last.
This is slightly off topic, but what I’d really love to see added to CSS3 is Photoshop-esque blending modes for elements.
Might make browsers quite a bit more laggy though.
I would love to see multiple-image background (that would lovely solve rounded corners also)
Although, I would be most grateful for all browsers to see CSS one way. Although that it is off-topic and never-will-be dream :)
If only that could happen, come on Firefox, monopolize!
Mine would be either the multiple background image, or for the pseudo elements to work in all browsers, such as :hover, :first-child, etc.
Incidentally Bryan, nice article in this month’s .net magazine, enjoyable read :)