-
200708 Jun
Posted in CSS3 Previews
I’m at @media 2007 at the moment, and just watched a very interesting presentation by Håkon Wium Lie – who, as we know, wrote the original specification for CSS, 13 years ago.
In his presentation he talked about Opera on different platforms, then went into the future of HTML and CSS, talking about the HTML 5 spec, the new
<video>element, @media queries, the CSS 3 paged content modules, multiple-columns, and much more.I asked him what he thought of Andy Budd’s call for a CSS2.2 specification, and he said that he was all for it – now that’s an influential ally!
He also let slip a heavy hint that the next release of Opera (or at least an imminent release) will support the @font-face declaration, enabling us to finally break free of the limited font set!
It was a very interesting talk that touched on many more subjects, some of which I may return to later.
-
200703 Jun
Posted in Browsers, CSS3 Previews, Declarations
The header of my own blog (still in development; please don’t judge me!) features a single image which spans two columns, with a semi-opaque panel featuring text over the top of it. I wanted the image to be clearly visible in the left column, and faintly visible in the central column. I could have done this by designing it that way in a graphics package, but as I intend to swap the image around in future, I wanted to come up with a client-side solution.
I could have just used a semi-opaque background image, which would have worked immediately with all major browsers bar IE6. But I didn’t want to use an extra image and I wanted to play around with CSS 3, so this is what I came up with:
Firstly, I put the image as a background property on the
<body>element. Next I created an empty, presentational<div>with a class of ‘header’. To this I assigned the colours and border colours, then gave it a large left-margin to allow the image to completely show through on the left column, and an opacity of 0.9 in order to allow the image behind to faintly show through on the central column.The problem with opacity is that it is inherited by all child elements, so if I had put text inside div.header, the text would also have become semi-opaque. To get around this I assigned position: relative to the
<body>, then wrapped another<div>called .title around<h1>and<h2>, put it after .header, then absolutely positioned it where I wanted it to appear:<body> <div class="header"></div> <div class="title"> <h1></h1> <h2></h2> </div> </body> body { background: white url(images/header.png) no-repeat; } .header { background-color:#8DCC3A; border-top:60px solid #4A5C61; margin-left:20%; opacity:0.9; } .title { left:21.5%; position:absolute; top:80px; width:57%; }Opacity doesn’t work in Internet Explorer, of course; I could have used a proprietary filter, but decided that the 19% of visitors to my site who use Internet Explorer wouldn’t suffer by not being able to see the whole image; it would be a little ‘bonus’ for whoever uses a better browser (here’s an image if you’re using IE and want to see what other users see).
Another solution was available to me; keep the
<h1>and<h2>inside .header, and use rgba values on it instead. This would be better semantically as I could drop .title, and wouldn’t involve any positioning as rgba values are not inherited. I could have used the following code:<body> <div class="header"> <h1></h1> <h2></h2> </div> </body> body { background: white url(images/header.png) no-repeat; } .header { background-color: rgba(141,204,58,0.9); border-top: 60px solid rgba(74,92,97,0.9); margin-left: 20%; padding-top: 20px; } h1, h2 { padding: 0 7%; }While this is obviously leaner and quicker, support for it is not as widespread; at the time of writing this, perhaps only 4% of my visitors would see the effect I wanted.
My two most extreme options were to have added extra styles and conditional comments to the document in order to getting working across all browsers, or to use the purer, smaller CSS3 to get it working on only a tiny amount of current browsers. In the end I did what we’ve been doing for so long now, and made a compromise.
-
200712 Apr
Posted in CSS3 Previews, Modules
Andy Budd gave a talk at this year’s Highland Fling web conference on the subject The Future of CSS (direct PDF download, 1.3MB).
Readers of this site will be familiar with most of the content (although it’s still worth reading), but two things stood out for me:
First, the use of simple calculations; I’ve thought for a long time that this would be useful, and I’m really glad that it’s being considered. Here’s an example:
#mainContent { width: calc(100% - 200px) }Second, the call for a CSS2.2. As he says:
[There are] some really interesting things in CSS3. Many of them are fairly niche, with little demand. Many browsers already support the more interesting features of CSS3; Why not have an intermediary step covering the stuff people want?
I hadn’t considered it before, but it makes sense. Most browsers now support a small range of simple CSS3 features, so why not partition those off to an intermediate recommendation while the other, more complex features are worked on?
-
200707 Mar
Posted in CSS3 Previews, Modules, W3C
Back in May 2003, the CSS3 Text Module made it to Candidate Recommendation status, meaning:
[The] W3C believes the specification is ready to be implemented.
Before it made the next step to Proposed Recommendation status, however, it was decided that a complete overhaul was needed. Four years later, and the renamed CSS Text Level 3 has been issued as a Working Draft.
This module:
… defines properties for text manipulation and specifies their processing model. It covers line breaking, justification and alignment, white space handling, text decoration and text transformation.
This is still a very rough document, with some intended declarations not defined yet – text-overflow, for example. You can see how it differs from the previous version with this list of changes.
-
200701 Mar
Posted in Browsers, CSS3 Previews, Declarations
My client wanted a page showing photographs of all their staff, and the design called for them to be semi-opaque against the page background, going fully opaque on mouseover, like so:
What would be the best way to do this?
One would be to make an image sprite of the images two states:
And use it as
background-imageon the element, swapping to the other state on:hover. One small problem with this is that IE6 only supports:hoveron theatag; another is that because the results are being pulled from a database, you’d have to write a dynamic stylesheet as well, to call the swap on all staff photos.Another option would be to create two separate images of the original, one for each state, and write a Javascript function to swap them over on
mouseover.There are other solutions as well, but none of them are the best way; the best way is to place them in the page with
img, then use the CSS3 opacity declaration for the switch, as so:img { opacity: 0.6; } img:hover { opacity: 1; }Two short lines of code, much quicker, the same effect without any of the hassle.
As with the rest of CSS3, however, one big drawback: no native support in the IE family. It works on just about every other major browser, however.
-
200716 Feb
Posted in Browsers, CSS3 Previews, Modules
First, here’s another table showing CSS support in web browsers, including CSS3 declarations.
Unfortunately the author only seems to have access to browsers that run in Windows, so it’s not as complete as it could be. Interesting, nonetheless.Update: I stand corrected. There are options to choose which browsers display in the table, which makes it very useful.
And here’s a demonstration purportedly showing an implementation of the text-overflow: ellipsis property using CSS and Javascript (read about the property here). Perhaps I’m missing something, but it only seems to work patchily for me in Firefox and Opera; I wonder how much testing it’s had.
-
200712 Feb
Posted in CSS3 Previews
We’ve been focussing a lot on what we will gain from CSS3, but of course we will lose some things too; namely, some of the CSS tricks we’ve come to rely on over the past few years.
I’m thinking about some of the great techniques that have been developed to stylise the web, like the ‘sliding doors’ technique, for example. It’s a simple and elegant way to style your navigation lists, but it will be made redundant either by border-radius or multiple backgrounds (or a combination of the two).
-
200706 Feb
Posted in CSS3 Previews
Sometimes it’s difficult to figure out why we might need some aspects of CSS3. Like why would anyone ever need
:not()? After all, it’s like it works on elements we don’t care to style. Why would we need that?
-
200702 Feb
Posted in Book Reviews, CSS3 Previews
Andy Clarke’s Transcending CSS
is a book that anyone involved with client-side web development should read.
For web designers who know some code there is plenty of forward thinking material about the importance of semantic HTML; for coders with an eye for design there is lots of food for thought about colour, style and inspiration; for everyone, there are some genuinely innovative tips on using CSS to tie it all together.
-
200701 Feb
Posted in CSS3 Previews
Are you dying to play with some of those CSS3 features that Opera‘s implementing, or is it just me? Well, it turns out there’s a way we can play with them already.
There’s a little program that takes XML+CSS and turns it into PDF‘s. It’s called PrinceXML, which already supports all those wonderful little CSS3 selectors the Opera folks are making us salivate over. The only downside here, is that PrinceXML isn’t a web browser, but a printing program. It’s still very useful and gives us a good playground to practice on.
Here’s a partial list of CSS3 selectors PrinceXML supports:
E ~ FE:not()E:nth-child()E:nth-of-type()E::beforeE::after
Have fun!
Hosting by:
