Code & Config - sharing the smart bits » CSS

Word Wrap – forgotten CSS property

admin — Wed, 23 Jun 2010 10:32:34 +0000

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;
}

Multiple background images with CSS 3.0

admin — Wed, 13 Jan 2010 15:15:25 +0000

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,
}

Rounded corners with CSS3

admin — Mon, 28 Dec 2009 20:44:33 +0000

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.