-
200806 Mar
Posted in Browsers
I’mI began writing this post in IE8*, something I didn’t think I’d be doing just a short while ago; the IE team have certainly been busy in the last 18 months! As it’s beta software there are obviously quite a few rough edges and we can’t consider it feature complete, but I thought I’d take a look at what features of CSS 3 have made it in already.The short answer: not many! In fact, the only ones I can find are the substring matching attribute selectors:
E[att^='val'] E[att$='val'] E[att*='val']
These allow you to choose elements based on substrings of their attributes; that begin with, end with, or contain (respectively) the provided value. Update: As has been pointed out in the comments, these were already available in IE7; I should have known that, as I wrote the (now outdtated) compatibility table! In my defence, it was very late when I wrote this post…
Other than that, nothing I can see. Although it’s not new to CSS3, generated content is supported, which is good news. Using the
:before
and:after
pseudo-elements, you can add text content (and images according to the spec, although they don’t seem to work in IE8);E:before { content: 'foo'; } E:after { content: 'foo'; }
No
opacity
orRGBA
yet, which is a shame as they’re supported in almost all of the other browsers. Still, it must be remembered that there’s still time for new features to be added before release.* I had to switch to Firefox; IE8 is not ready just yet!
-
200806 Mar
Posted in News
So, MS have finally pulled their finger out and released it
WARNING – the word on the street is that it IE8 automatically overwrites any IE7 installation so bear that in mind!
-
200805 Mar
Daniel Glazman has created a new test to show CSS3 Selectors support in your browser. He has also posted results for current browsers.
With this and the Acid 3 test, there’s a lot for browser makers to aim for.
-
200804 Mar
Yesterday, Dean Hachamovitch announced that IE8 will, by default, interpret web content in the most standards compliant way it can. This decision is a change from what they announced initially which prompted a huge amount of feedback (good and bad) within the web community.
Dean goes on to mention that the change of heart was due to MS recently publishing a set of Interoperability Principles and suggesting that “…IE8’s default is a demonstration of the interoperability principles in action”.
-
200803 Mar
Posted in W3C
The closing date for letting the W3C know your priorities for CSS3 is Monday, March 10th. If you want to help shape the future of CSS, get over to webstandards.org and leave a comment now.
-
200828 Feb
As this is my first post, I’d like to introduce myself. My names James and I’m currently working as a senior User Interface Developer for Teachers TV. Like many of you guys, I’m fanatical about web standards and about creating the leanest, most semantic markup possible. I too am excited about the new possibilities with the arrival of CSS3, and am keen to contribute as much as I can to this great site. My first post is regarding a new method of creating Tooltips that I devised while coming up with a solution for a recent project.
Up until now, there were a few options in existence; ugly Javascript-based methods, or solutions that use blank anchor tags (for IE6 compatibility). Another possibility is to ignore IE6 altogether and make use of the hover pseudo class in conjunction with the parent element that contains the tooltip text. I had to think out the box a bit on this one, but have come up with a completely new CSS3-based solution.
My solution degrades gracefully in browsers that don’t support the CSS3 elements I’ve used and is a lot more elegant than former methods since it utilises an element’s title attribute, rather than creating additional markup within a parent element.
Let’s start with the HTML (Note: the following example is based on use of icon background images for the divs, hence the fixed dimensions):-
<div title="Tooltip text for first div"></div> <div title="Tooltip text for second div"></div>
In short, my method is achieved by making use of the :before (or :after) pseudo element and content property, combined with the :hover pseudo class.
First off I grab the value of the divs title attribute by using the content property’s attribute function. Notice how I set the generated content to display:none -I’ll make it visible on :hover.
div:before{ content:attr(title); display:none; }
I now combine both the :hover class and :before pseudo element together, to specify values for the generated content when the div is hovered over.
div:hover::before{ width:200px; display:block; background:yellow; border:1px solid black; padding:8px; margin:25px 0 0 10px; }
One of the problems I came across at this stage, was that when having two elements floated left to each other and you hover over one of the elements, although the tooltip displays, it renders underneath the adjacent element. It is a simple case of layering the generated content over the div; my immediate thought was to specify a layering value in the above statement. However, after referring to the relevant W3C spec, it was apparent that in line with their recommendations, user agents ignore the position property in an instance such as the above statement, therefore rendering a z-index value useless.
The solution was to specify the z-index and position properties in a separate statement dealing exclusively with the :hover pseudo class.
div:hover{ z-index:10; position:relative; }
This meant that it now works! It of course works in every browser above IE7 including Safari 3, Firefox 2.0.0.12 & Opera 9.5b
Obviously there’s nothing you can do to stop the default behaviour of standards compliant browsers regarding rendering of title attributes, so when leaving your cursor on my method for too long, the default browser behaviour will overlay the generated content CSS effect
-
200827 Feb
Posted in News
Opera has a dragonfly that is getting ready to hatch. If any of you are attending SxSW, Opera will be revealing more information there. Catch us at the booth or at the Rock Opera party at Stubbs on the 10th of March. Keep your eyes open for updates to the Dragonfly site, for more information before then.
Opera Dragonfly will initially launch as a private beta to a select audience for its test flight, before going public when we are satisfied with the trials.
-
200819 Feb
Mozilla’s John Resig has removed support for certain CSS3 selectors from the jQuery Javascript library, and says the fact that no-one has asked for them to be reintroduced is evidence that they aren’t very useful:
Now, I’m sure I’ll probably get lots of feedback saying “but ‘E + F’ can be useful, look at this example” or “of course ~= is useful, you can use it on rel attributes” – that’s not the point. The fact is that they are woefully un-used. To the point that they are a burden upon the implementors of the specification. What’s the point of implementing the above features – or more importantly: optimizing the above features for speed – if no one is using them.
Daniel Glazman, who authored the original spec, says that John is looking at them from a purely HTML-centric viewpoint, that lack of support means that people haven’t really thought of using them yet, and that just because the majority don’t have a use for them, doesn’t mean that they are useless;
So we have here selectors that are not implemented yet or not interoperably and Web designers don’t use them. How surprising!!! In CSS, we have some features here to serve some typographic local constraints, because we saw a menu in a restaurant nicely designed and we needed a new feature to be able to make it in CSS. Serves a very little community of users. That community will NEVER show up in any stat. Is that a reason to drop the feature? You don’t see a wide community of users for a given selector? Is that a reason to drop it? CERTAINLY NOT.
I’m with Daniel on this one; the key point for me is that the support for them at the moment is so limited that we haven’t yet seen what the talented development community can do with them. I’m sure I, as a front-end HTML developer, won’t use them as frequently as the existing selectors, but I already use some of them infrequently and look forward to using them more.
-
200813 Feb
One of the selectors new to CSS3 is the
:target
pseudo-class, which can be used to apply rules to an element with a fragment identifier; that is, an anchor name or an id. For example, let’s assume you have a section heading with an id of ‘chapter_2’:<h3 id="chapter_2">The Title of the Chapter</h3>
You could create a direct link to that element by using the fragment identifier at the end of the URL:
http://www.example.com/index.html#chapter_2
And, with the
:target
selector, apply a background to that element to indicate clearly where you have arrived:h3:target { background-color: #ff0; }
Pretty useful, right? Not a killer feature, but useful nonetheless. It can be made even more useful, however, with a little bit of ingenuity; how about, for example, a pure CSS image gallery?
Take a look at this example (in a browser which supports
:target
; Mozilla, Webkit or Opera browsers will do the trick). Clicking the links allows you to browse through the different images, and it’s done with minimal markup and no scripting.The first step is to create a list, with the image, name, and link in each list item; for example:
<li id="one"> <p><a href="#one">One</a></p> <img src="https://www.css3.info/wp-content/uploads/2009/09/one.jpg"> </li>
Each list item needs an
id
, which will provide the anchor, and the linkhref
is to its ownid
; this allows:target
to work its magic! All the images are absolutely positioned on top of each other, and using the selector simply changes thez-index
value so the targeted image is on top:img { position: absolute; } li:target img { z-index: 100; }
Easy! Of course, this is only a very simple example; with even more ingenuity, this could be expanded to become a very useful tool.
Update: I’ve just seen that Daniel Glazman came up with a very similar proposition before I did: CSS-only tabs.
-
200811 Feb
Posted in Browsers
As of last week Webkit passes the CSS Selector Test joining Konqueror and Opera as the third browser to provide a stable and complete CSS selector implementation. You can download a nightly build for yourself to try it out. Congratulations to the Webkit team at Apple!
More information about the current state of CSS Selector support can be found on in the article CSS Selectors: Opera and Safari pass the test! over at Rakaz.nl.