-
200622 Dec
Posted in Browsers, Declarations
The Webkit project have announced support for a new range of CSS declarations, to be used for putting strokes around text. This strikes me as a little strange for two reasons:
-
200618 Dec
Posted in Interviews
Thanks to my new “online friend”, (or how do you call such a thing?) Faruk Ateş, I got the chance to ask the famous webdesigner Andy Clarke some questions via email. He responded quite rapidly, and there’s a lot of interesting stuff among his answers. So check it out:
-
200617 Dec
Posted in Book Reviews

It’s taken me years to get to the level of CSS developer I am now, and I’m by no means a master. (I am able to make just about any Photoshop design into a solid webdesign though…) Because it’s taken me so long, I was a bit skeptical about the subtitle of the book I’m now reviewing: Beginning CSS Web Development: From Novice to Professional.
-
200614 Dec
Posted in Interviews
This site has always been about what we wanted to tell you about CSS3. We have some nice articles coming up, among which at least one interview with a famous webdesigner and I would like to know (so please drop your questions in the comments): what do you want to know about CSS3?
-
200612 Dec
Posted in Modules
In my previous post I don’t think I put enough emphasis on the fact that the Advanced Layout method may never happen; it could be dropped by the W3C, never implemented by the browser makers, or replaced by a better method.
However, let’s work on the assumption that it does get implemented and take a closer look.
-
200630 Nov
Posted in Modules
The difficulty many developers face when they start moving to table-less sites is getting the layout to work. Floats and positioning are easy enough for basic layouts, but start to become incredibly complex when moving to a more advanced level. When the push to move to pure CSS layouts became intense, the problem was – and is – that tables are still a lot more convenient in many cases, and there is sometimes no decent alternative without contorting yourself; you can’t even use the
display: tablefamily, as there’s no support in IE.An interesting potential solution is in the CSS3 Advanced Layout module.
-
200623 Nov
-
200618 Nov
Recently I had to code a box with rounded corners for a client, and I came up with a solution which works with 99% of the browser market and uses the CSS3 border-radius declaration for browsers which support it.
The simplified HTML code is:
<div class="curves top"> <img src="http://www.css3.info/wp-content/uploads/2009/09/topl.png" width="10" height="10" alt=""/> </div> <div class="box"></div> <div class="curves bottom"> <img src="http://www.css3.info/wp-content/uploads/2009/09/botl.png" width="10" height="10" alt=""/> </div>
The divs .top and .bottom will be hidden from browsers which support border-radius (or a proprietary implementation of it).
The basic CSS is:
div { margin: 0; padding: 0; width: 100px; background-color: #ff0000; } .box { min-height: 100px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .curves { display: none; }This will display a box 100×100 pixels with curved corners in Firefox and Safari, hiding the .top and .bottom divs and implementing border-radius.
To make it display in IE, we add some conditional comments with extra CSS which displays the .top and .bottom divs with four rounded corner images:
<!--[if IE]> <style type="text/css"> .box { min-height: 80px; } .curves { display: block; height: 10px; } .top { background: #ff0000 url('images/topr.png') no-repeat right top; } .bottom { background: #ff0000 url('images/botr.png') no-repeat right top; } </style> <![endif]--> <!--[if lt IE 7]> <style type="text/css"> .box { height: 80px; } <![endif]--> </style>The main drawbacks with this method are that the CSS won’t validate and it only works with fixed width boxes; however, a little recoding will fix this second problem.
Users of Opera and other browsers will see a square box; as my client is corporate and has never received a hit from an Opera browser, I was willing to make this sacrifice. If they ever implement -opera-border-radius I could add this in.
Of course there are other solutions for this, but I thought this way was quite simple.
-
200616 Nov
The Internet Explorer team are asking (again) for input on most-wanted improvements for the next version of IE. Most of the work seems as if it will be focused on Javascript and the DOM, but as you can see on this wishlist there are also requests for CSS updates – including support for RGBA, HSL and HSLA from the CSS3 colour module.
-
200610 Nov
Posted in W3C
It’s all gone a bit quiet round here… sorry about that, but there’s not a lot of movement on CSS3, and I know the authors here are quite busy personally.
Anyway, potentially big news is that the WHATWG are asking for developer feedback on HTML5.
I’m still wading through the document, but of what I’ve read so far, of most interest to CSS fanatics will be a group of new, semantic tags; for example
,
Of course these aren’t directly related to CSS3, but it should help save a lot of classes, ids and tag soup if implemented – and that’s the key. Even if it turns into a recommendation, how long until HTML5 is supported in IE – if at all. Many questions, many variables; but stay positive, and give your opinion.
