CSS3, when it becomes a recommendation, will offer web designers the ability to specify that elements should have rounded corners instead of square ones. This will be a great relief, because finally we will be able to stop messing around with background images and positioning.

Right now, you can specify rounded borders in your CSS, but it will only show up properly on Mozilla-based browsers. The property is called -moz-border-radius and it takes a number. So, to make a div with rounded corners, you might use something like this:

div {
border: 1px solid black;
-moz-border-radius: 20px; }

This isn’t too far off the official CSS3 working draft:

div {
border: 1px solid black;
border-radius: 20px; }

You’ll be able to specify two numbers there, which will let you make rounded borders that aren’t circular. You can read more about it on the CSS3 Backgrounds and Borders Module.

It will be great when this is released and browser support gets up to speed. At the moment, however, we should stick to fiddling with background images. Why? Because currently CSS rounded borders are ugly. I’ve made an image to compare rounded borders made in Photoshop with those drawn by Firefox with the -moz-border-radius property.

(more…)

Disclaimer for Ailis: Sorry, geek post again!

Mentioned these sites in a previous post a while ago:

• Jeffrey Zeldman: XHTML 2 and all that
• Mark Pilgrim: Semantic obsolescence — this one links to about a million more things to read

I have decided that the new stuff that XHTML 2 will bring will outweigh any negative side-effects (and at the moment I don’t see too many anyway). Still, the above sites are interesting reading if you want to see the other side of progress on the web.

I do think that XHTML 2 will be a bit more tricky to use — or at least it introduces a lot more functionality into XHTML that isn’t as easy as the more basic stuff. But I’m all for it!

(For those that haven’t had a glance at it yet, the new draft recommendation for XHTML 2.0 is available for reading: http://www.w3.org/TR/xhtml2/. Have a good poke around, it’s quite enlightening…)

Update: A list of all the XHTML 2.0 elements and their attributes can be found at http://www.w3.org/TR/2005/WD-xhtml2-20050527/elements.html

Apologies for the boring XHTML post (you love them really) but I just found the best thing ever. For a while now I’ve had to use <div class="clear">&nbsp;</div> (with CSS set to clear: both;) in a few of my layouts (some floated layouts require a cleared element below both of them so that their parent element encloses them all the way to the bottom — you’ll be familiar with it if you use floats).

Well no more! I’ve found a much better solution. I found it in the guestblock code (guestblock having been recently installed on Open Space: open-space.org.uk/guestblock). And it’s so simple I cant believe I didn’t think of it myself! Well done, Matthew!

And here it is, in all its simplicity:

1. XHTML: <hr class="clear" />
2. CSS: .clear { clear: both; visibility: hidden; }

Genius!

I wasn’t actually going to post about this for a number of reasons, mainly because it bears the possibility of being boring, but I recently came across the Working Draft for XHTML 2 and I find it very interesting. If you haven’t heard about the planned changes, you might like to take a peek (if you’re an XHTML fanatic like me).

(XHTML is the language we use to make web pages. Right click on this page and click on “View source”: What you see is XHTML. And it’s very pretty and wonderful.)

XHTML 2 is going to be the biggest update to HTML/XHTML for a very long time. Currently, the latest version of XHTML is 1.1, but with XHTML 2 there will be a plethora of new elements and attributes.

Among the biggest updates is the ability to apply href="" to any element. Therefore you can use something like <address href="mailto:beingmrkenny@gmail.com">Email me</address> to specify links to your email address, or even, and this is more complicated:

<p>My favourite pages:</p>

<ul>
 <li href="http://beingmrkenny.co.uk/">
   Being Mr Kenny
 </li>
 <li href="http://open-space.org.uk/">
   Open Space
 </li>
</ul>

Notice there’s no <a href=""> in there.

Also to be added is <blockcode> to be used in place of <pre><code> combinations, <nl> for navigational lists (to replace things like <ul id="nav">).

There’s loads of other updates, but I think I’m waffling a bit about stuff only a few people will be interested in. Investigate them for yourself at http://www.w3.org/TR/xhtml2/. It’s very exciting :D

Update: There’s a more detailed list available in the draft: http://www.w3.org/TR/xhtml2/…

Update 2: Something about images: http://www.w3.org/MarkUp/2004/xhtml-faq#img

Wow! This stuff is hardcore! I had little idea that DOCTYPEs were so complex! I thought it was quite a simple matter, but apparently it is not. For example, Mozilla’s DOCTYPE detection and the difference between quirks mode and standards mode are very complicated.

No wonder different browsers do things differently. It’s almost incredible that they get anywhere near as close as they do.

Sorry, completely nerdy post, but it’ll be interesting to anyone who wants to know a little more about the mysteries of how web pages work, and their interoperability.

4.4.1. XHTML Skiing Module

So, I’m reading the XHTML specs on the w3c website (it’s always good to see if how much more I can undestand each time I go back) when I come across this section.

Bascially, the linked page gives a lot of technical info on how XHTML should be used, and how you can add bits to it to make it do what you want it to do. At the moment I’m trying to find out how to put start="x" back into the <ol> element, since it was taken out in a moment of idiocy.

Anyway, in amongst all the CDATA and stuff that, quite frankly, goes a bit over my head, I find a section on how XHTML can be used to describe “aspects of a ski lodge”, under the heading “4.4.1. XHTML Skiing Module”. What?! Have they gone mad?

XHTML, for those who aren’t geeks like me, is the language used to display web pages. Right click and select “view source”. If you’re using a civilised browser, it should colour the XHTML tags for you; but if you’re using Internet Explorer, you’ll have to put up with the rubbishness of Notepad. Anyway, you will be able to see how to put a link into your document (<a>), and how to make headings (<h1>). XHTML is all about what different bits of text do (i.e., is this text a link or a heading?).

So what this whole thing about ski lodges is all about, well, I’m a bit confused. I thought it was pretty funny, anyway. It’s probably not, but I thought it was.