Code & Config – sharing the smart bits

One of the CSS properties which is not very well know but very useful is called word-wrap. It allows you to break long single words which do not fit into specified space. So instead of hiding the problem with overflow: hidden use the following.

You can for example defined a class called “break_word” and apply it to the situation we have just described. You can’t think of an example? Think about long URLs.

.break_word {
    word-wrap: break-word;
}

As CSS 3.0 support improves across the current browsers it might be good to start learning this new CSS properties.
I would only use it for images which are not fundamental for site because the browser support does not include Internet Explorer 7 which has huge market share.

#yourdiv {
  background:
    url(image_1.png) -100px -100px no-repeat,
    url(image_2.png)   0px -10px no-repeat,
    url(image_3.png)  20px 20px no-repeat,
    url(image_4.png)  -20px -40px no-repeat,
}

The support of browsers for rounded corners has not reached the level so we could use as default solution but there are always part of the site where it kind of make sense to use it. What i mean is that it will not really break the visual experience if the corners will not be rounded in some browsers (we talking Internet Explorer here).

The support for rounded corners is not the same across the browsers but there are ways around. This is what you need to do so the rounded corners syntax is understood by all browsers who are able to handle it.

Lets say we have class called “rounded_corners” we want to apply the rounded corners.

.rounded_corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

I would recommend to store this syntax as snippet if you text editor supports code snippets. You could assign shortcut such is “round” which would bring both of this CSS properties so you do not have to remember them. They are not the best to remember. Coda and TextMate supports code snippets.