Earlier this year we asked if you still want more out of CSS 3 and we found that you did. Of late, we are seeing the dialogue rekindled time and again with great posts being written on other major blogs. Smashing Magazine contributor Inayaili de Leon provides code samples and insight on: using browser-specific properties, selectors, RBGA and opacity, multi-column layouts, multiple backgrounds, word wrap, text shadow. @font-face attribute, border radius, border image, box shadow and more. Definitely great work by de Leon, that also earned a mention from ajaxian. So check out the post and enjoy! Well done Inayaili!
You can skip to the end and leave a response.
Thanks. I’m always looking for more CSS3 stuff.
@Frederick: indeed. I use jQuery myself for various things on my websites (and on some pages use jQuery UI – I just love movable and droppable boxes, xD), but the sites’ functionalities don’t absolutely depend on it. It’s simply an extra bonus for people who have scripts enabled – anything that’s dependent fully on scripts is simply hidden unless scripts are enabled/present on the client side. Things such as loading a forum categories/boards index through AJAX are initially hidden, for example. For low connections and certain devices, elements that have script are usually disabled.
Anyway, I’m the same with CSS and markup – for my primary site I use SMF forum and TinyPortal, but it’s all been completely changed. I haven’t used presentational attributes for so long that some I’ve mainly forgotten about. CSS really makes things a lot less redundant, and makes code way more manageable and consistent. Initially with my site’s layout, out of the box that is, it depended mainly on random margins, padding, and so on – the dread of pixel-defined fonts were also present (oh no!).
Unfortunately, I still see many folks out there who use, even with XHTML 1.0 Strict DTD, things such as marquee, blink, and iframes that have weird ugly borders around them. Everything I suggest involves CSS, but some out there don’t wanna hear about CSS. Two months later they begin using it and then that’s when they say they can’t live without it!
I’ve taken use of things such as database-stored CSS, the storing of CSS vital to various pages so that some of the CSS isn’t used for things that aren’t necessary to use it for. And this will only continue to expand as CSS3 grows, along with browser support. My main site has rounder borders (webkit, mozilla) so when viewing it with any version of IE, it looks slightly ‘off’ but I think it’s a small price to pay, because eventually IE will support it (when the spec becomes mature enough to them to use it, which is about 15 years or so xD).
@Ryan: Wow, definitely a nice site too! Gotta love that logo too! I particularly like the Futurebox article – it’s a good example of what’s been discussed here! Great stuff!
I find it surprising the author of the Smashing Magazine article apparently doesn’t have Firefox 3.5 installed to experiment with CSS3.
As you can see from comments like:
“Browser support: border-image is currently only supported by Webkit-based browsers. Support in the next release of Firefox is not certain.”
“Browser support: box-shadow is currently supported only by Webkit-based browsers, but the upcoming Firefox 3.5 will very likely support it as well.”
Nothing is “uncertain” or “very likely” at this point, it’s already been set in stone before the first beta (for those who didn’t follow, both properties will be in).
CSS3 file type? Just *.css as before. You can be using some of CSS3’s currently-supported specs right now in your already-existing *.css style sheets. Granted, some only work on Webkit or KHTML, or on Mozilla/Firefox. Some only work on IE, oddly enough. xD IE loves to build the giant laser before building the power source for it! xD