Category: css
How Cascading Style Sheets are implemented in current browsers, what we can do with the language, and what to look forward to.
How Cascading Style Sheets are implemented in current browsers, what we can do with the language, and what to look forward to.
My last post was about using SVG values for the background-image property, and I pointed out one big problem with the technique:
The drawback of this is that it’s not ready for use just yet — browsers that don’t support SVG in
background-imagewill not provide any fallback, even if you supply anotherbackground-imagevalue; so in non-supporting browsers, no image at all will be displayed.
This was annoying me a little, and I couldn’t find any workarounds that didn’t use JavaScript. However, after a bit of head-scratching I’ve come up with a way to get around it.
While having a look through the list of features for developers planned for Firefox 4 earlier today, I noticed this:
You can now use SVG with the
imgelement, as well as the background image in CSS.
I know you can already use SVG in background-image with Safari, Chrome and Opera, and this, coupled with Internet Explorer’s push towards SVG and the strong chance this will be available in IE9, made me decide to take a closer look.
The latest nightly releases of what will become Firefox 4 have implemented a couple of experimental new CSS features. The –moz-calc function allows calculations on length values, and the :-moz-any selector permits grouping of simple selectors.
If you have a nightly build of Firefox you can see a little demo I’ve put together of them in action.
I’ve updated my post, Create a studio-style backdrop with CSS3, as I realised a way to do the reflection without requiring an extra image — using the scale transformation function to flip the image vertically.
Sitepoint’s Web Design blog featured an article this week called Create A Studio Style Backdrop In Photoshop, which provides instructions for making a glossy, reflective surface effect, similar to what you often see in adverts.
As the title makes clear, the tutorial is for creating the effect in Photoshop — but really, the same effect is fairly easily achievable with some bleeding-edge CSS. That said, it won’t work in every browser, so currently it’s just a proof-of-concept piece.
I’m writing about the CSS3 Multi-column layout module and I notice that WebKit supports a series of proprietary properties: –webkit-column-break-after, –webkit-column-break-before, and –webkit-column-break-inside. However, despite the documentation saying that they’re implemented in Safari 3+, I can’t seem to get any of them to work.
Has anyone reading this ever seen an example of these in action? I’ve searched for demos but have found nothing. If you know anything about this, please leave me a comment; your help would be gratefully appreciated.
Usually when I attend @media (that is, on two previous occasions) I write a follow-up blog post on what I saw there. Well I attended this year, and I’ve written the post, but it’s on the blog of my employer, Preloaded: HTML5, Mobile, and UCD: what we saw at @media.
[#] 0 Comments