The Future Of CSS: Experimental CSS Properties

Advertisement

Despite contemporary browsers supporting a wealth of CSS3 properties, most designers and developers seem to focus on the quite harmless properties such as border-radius, box-shadow or transform. These are well documented, well tested and frequently used, and so it’s almost impossible to not stumble on them these days if you are designing websites.

But hidden deep within the treasure chests of browsers are advanced, heavily underrated properties that don’t get that much attention. Perhaps some of them rightly so, but others deserve more recognition. The greatest wealth lies under the hood of WebKit browsers, and in the age of iPhone, iPad and Android apps, getting acquainted with them can be quite useful. Even the Gecko engine, used by Firefox and the like, provides some distinct properties. In this article, we will look at some of the less known CSS 2.1 and CSS3 properties and their support in modern browsers.

Some explanation: For each property, I state the support: “WebKit” means that it is available only in browsers that use the WebKit engine (Safari, Chrome, iPhone, iPad, Android), and “Gecko” indicates the availability in Firefox and the like. Finally, certain properties are part of the official CSS 2.1. specification, which means that a broad range of browsers, even older ones, support them. Finally, a label of CSS3 indicates adherence to this specification, supported by the latest browser versions, such as Firefox 4, Chrome 10, Safari 5, Opera 11.10 and Internet Explorer 9.

WebKit-Only Properties

-webkit-mask

This property is quite extensive, so a detailed description is beyond the scope of this article and is certainly worth a more detailed examination, especially because it could turn out to be a time-saver in practical applications.

-webkit-mask makes it possible to apply a mask to an element, thereby enabling you to create a cut-out of any shape. The mask can either be a CSS3 gradient or a semi-transparent PNG image. An alpha value of 0 would cover the underlying element, and 1 would fully reveal the content behind. Related properties like -webkit-mask-clip, -webkit-mask-position and -webkit-mask-repeat rely heavily on the syntax of the ones from background. For more info, see the Surfin’ Safari blog and the link below.

-webkit-mask

Example

Image mask:

.element {
	background: url(img/image.jpg) repeat;
	-webkit-mask: url(img/mask.png);
}

Example

Gradient mask:

.element2 {
	background: url(img/image.jpg) repeat;
	-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

Further reading: Safari Developer Library

-webkit-text-stroke

One of the shortcomings of CSS borders is that only rectangular ones are possible. A ray of hope is -webkit-text-stroke, which gives text a border. Setting not only the width but the color of the border is possible. And in combination with color: transparent, you can create outlined text.

Examples

Assigns a blue border with a 2-pixel width to all <h1> headings:

h1 {-webkit-text-stroke: 2px blue}

Another feature is the ability to smooth text by setting a transparent border of 1 pixel:

h2 {-webkit-text-stroke: 1px transparent}

Creates text with a red outline:

h3 {
	color: transparent;
	-webkit-text-stroke: 4px red;
}

-webkit-text-stroke

Further reading: Safari Developer Library

-webkit-nbsp-mode

Wrapping can be pretty tricky. Sometimes you want text to break (and not wrap) at certain points, and other times you don’t want this to happen. One property to control this is -webkit-nbsp-mode. It lets you change the behavior of the &nbsp; character, forcing text to break even where it is used. This behavior is enabled by the value space.

Further reading: Safari Developer Library

-webkit-tap-highlight-color

This one is just for iOS (iPhone and iPad). When you tap on a link or a JavaScript clickable element, it is highlighted by a semi-transparent gray background. To override this behavior, you can set -webkit-tap-highlight-color to any color. To disable this highlighting, a color with an alpha value of 0 must be used.

Example

Sets the highlight color to red, with a 50% opacity:

-webkit-tap-highlight-color: rgba(255,0,0,0.5);

Supported by: iOS only (iPhone and iPad).

Further reading: Safari Developer Library

zoom: reset

Normally, zoom is an Internet Explorer-only property. But in combination with the value reset, WebKit comes into play (which, funny enough, IE doesn’t support). It enables you to override the standard behavior of zooming on websites. If set with a CSS declaration, everything except the given element is enlarged when the user zooms on the page.

Further reading: Safari Developer Library

-webkit-margin-collapse

Here is a property with a quite limited practical use, but it is still worth mentioning. By default, the margins of two adjacent elements collapse, which means that the bottom distance of the first element and the top distance of the second element merge into a single gap.

The best example is two <p>s that share their margins when placed one after another. To control this behavior, we can use -webkit-margin-collapse, -webkit-margin-top-collapse or -webkit-margin-bottom-collapse. The standard value is collapse. The separate value stops the sharing of margins, which means that both the bottom margin of the first element and the top margin of the second are included.

-webkit-margin-collapse

Further reading: Safari Developer Library

-webkit-box-reflect

Do you remember the days when almost every website featured a reflection of either its logo or some text in the header? Thankfully, those days are gone, but if you’d like to make a subtle use of this technique for your buttons, navigation or other UI elements with CSS, then -webkit-box-reflect is the property for you.

It accepts the keywords above, below, left and right, which set where the reflection is drawn, as well as a numeric value that sets the distance between the element and its reflection. Beyond that, mask images are supported as well (see -webkit-mask for an explanation of masks). The reflection is created automatically and has no effect on the layout. Following elements are created using only CSS, and the second button is reflected using the -webkit-box-reflect-property.

-webkit-box-reflect

Examples

This reflection would be shown under its parent element and have a spacing of 5 pixels:

-webkit-box-reflect: below 5px;

This reflection would be cast on the right side of the element, with no distance (0); additionally, a mask would be applied (url(mask.png)):

-webkit-box-reflect: right 0 url(mask.png);

Further reading: Safari Developer Library

-webkit-marquee

Here is another property that recalls the good ol’ days when marquees were quite common. Interesting that this widely dismissed property turns out to be be useful today, when we shift content on tiny mobile screens that would otherwise not be fully visible without wrapping.

The weather application by ozPDA makes great use of it. (If you don’t see shifting text, just select another city at the bottom of the app. WebKit browser required.)

Example

.marquee {
	white-space: nowrap;
	overflow:-webkit-marquee;
	width: 70px;
	-webkit-marquee-direction: forwards;
	-webkit-marquee-speed: slow;
	-webkit-marquee-style: alternate;
}

There are some prerequisites for the marquee to work. First, white-space must be set to nowrap if you want the text to be on one line. Also, overflow must be set to -webkit-marquee, and width set to something narrower than the full length of the text.

The remaining properties ensure that the text scrolls from left to right (-webkit-marquee-direction), shifts back and forth (-webkit-marquee-style) and moves at a slow rate (-webkit-marquee-speed). Additional properties are -webkit-marquee-repetition, which sets how many iterations the marquee should pass through, and -webkit-marquee-increment, which defines the degree of speed in each increment.

Further reading: Safari Developer Library

Gecko-Only Properties

font-size-adjust

Unfortunately, this useful CSS3 property is supported only by Firefox at the moment. We can use it to specify that the font size for a given element should relate to the height of lowercase letters (x-height) rather than the height of uppercase letters (cap height). For example, Verdana is much more legible at the same size than Times, which has a much shorter x-height. To compensate for this behavior, we can adjust the latter with font-size-adjust.

This property is particularly useful in CSS font stacks whose fonts have different x-heights. Even if you’re careful to use only similar fonts, font-size-adjust can provide a solution when problems arise.

Example

If Verdana is not installed on the user’s machine for some reason, then Arial is adjusted so that it has the same aspect ratio as Verdana, which is 0.58 (at a font size of 12px, differs on other sizes).

p {
	font-family:Verdana, Arial, sans-serif;
	font-size: 12px;
	font-size-adjust: 0.58;
}

font-size-adjust

Supported by: Gecko.

Further reading: Mozilla Developer Network

image-rendering

A few years ago, images that were not displayed at their original size and were scaled by designers, could appear unattractive or just plain wrong in the browser, depending on the size and context. Nowadays, browsers have a much better algorithm for displaying resized images, however, it’s great to have a full control over the ways your images will be displayed when scaled, especially with responsive images becoming a de facto standard in responsive Web designs.

This Gecko-specific property is particularly useful if you have an image with sharp lines and want to maintain them after resizing. The relevant value would be -moz-crisp-edges. The same algorithm is used at optimizeSpeed, whereas auto and optimizeQuality indicate the standard behavior (which is to resize elements with the best possible quality). The image-rendering property can also be applied to <video> and <canvas> elements, as well as background images. It is a CSS3 property, but is currently supported only by Firefox.

image-rendering

It’s also worth mentioning -ms-interpolation-mode: bicubic, although it is a proprietary Internet Explorer property. Nevertheless, it enables Internet Explorer 7 to render images at a much higher quality after resizing which is useful because by default this browser handles such tasks pretty poorly.

Supported by: Gecko.

Further reading: Mozilla Developer Network

-moz-border-top-colors

This property could be filed under ‘eye-candy’. It allows you to assign different colors to borders that are wider than 1 pixel. Also available are -moz-border-bottom-colors, -moz-border-left-colors and -moz-border-right-colors.

Unfortunately, there is no condensed version like -moz-border-colors for this property, so the border property must be set in order for it to work, whereas border-width should be the same as the number of the given color values. If it is not, then the last color value is taken for the rest of the border.

Example

Below, the element’s border would have a standard color of orange applied to the left and right side (because -moz-border-left-colors and -moz-border-right-colors are not set). The top and bottom borders have a kind of gradient, with the colors red, yellow and blue.

div {
	border: 3px solid orange;
	-moz-border-top-colors: red yellow blue;
	-moz-border-bottom-colors: red yellow blue;
}

-moz-border-top-colors

Supported by: Gecko.

Further reading: Mozilla Developer Network

Mixed Properties

-webkit-user-select and -moz-user-select

There might be times when you don’t want users to be able to select text, whether to protect it from copying or for another reason. One solution is to set -webkit-user-select and -moz-user-select to none. Please use this property with caution: since most users are looking for information that they can copy and store for future reference, this property is neither helpful nor effective. In the end, the user could always look up the source code and take the content even if you have forbidden the traditional copy-and-paste. We do not know why this property exists in both WebKit and Gecko browsers.

Supported by: WebKit, Gecko.

Further reading: Safari Developer Library, Mozilla Developer Network

-webkit-appearance and -moz-appearance

Ever wanted to easily camouflage an image to look like a radio button? Or an input field to look like a checkbox? Then appearance will come in handy. Even if you wouldn’t always want to mask a link so that it looks like a button (see example below), it’s nice to know that you can do it if you want.

Example

a {
	-webkit-appearance: button;
	-moz-appearance: button;
}

Supported by: WebKit, Gecko.

Further reading: Safari Developer Library, Mozilla Developer Network

text-align: -webkit-center/-moz-center

This is one property (or value, to be exact) whose existence is quite surprising. To center a block-level element, one would usually set margin to 0 auto. But you could also set the text-align property of the element’s container to -moz-center and -webkit-center. You can align left and right with -moz-left and -webkit-left and then -moz-right and -webkit-right, respectively.

Supported by: WebKit, Gecko.

Further reading: Safari Developer Library, Mozilla Developer Network

CSS 2.1. Properties

counter-increment

How often have you wished you could automatically number an ordered list or all of the headings in an article? Unfortunately, there is still no CSS3 property for that. But let’s look back to CSS 2.1, in which counter-increment provides a solution. That means it’s been around for several years, and even supported in Internet Explorer 8. Did you know that? Me neither.

In conjunction with the :before pseudo-element and the content property, counter-increment can add automatic numbering to any HTML tag. Even nested counters are possible.

Example

For numbered headings, first reset the counter to start at 1:

body {counter-reset: thecounter}

Every <h1> would get the prefix “Section,” including a counter that automatically increments by 1 (which is default and can be omitted), where thecounter is the name of the counter:

.counter h1:before {
	counter-increment: thecounter 1;
	content:"Section"counter(thecounter)":";
}

Example

For a nested numbered list, the counter is reset and the automatic numbering of <ol> is switched off because it features no nesting:

ol {
    counter-reset: section;
    list-style-type: none;
}

Then, every <li> is given automatic incrementation, and the separator is set to be a point (.), followed by a blank.

li:before {
    counter-increment: section;
    content: counters(section,".")"";
}
<ol>
	<li>item</li>			<!-- 1 -->
	<li>item				  <!-- 2 -->
		<ol>
			<li>item</li>	<!-- 1.1 -->
			<li>item</li>	<!-- 1.2 -->
		</ol>
	</li>
	<li>item</li>			<!-- 3 -->
<ol>

Supported by: CSS 2.1., all modern browsers, IE 7+.

Further reading: W3C

quotes

Are you tired of using wrong quotes just because your CMS doesn’t know how to properly convert them to the right ones? Then start using the quotes property to set them how you want. This way, you can use any character. You would then assign the quotes to the desired element using the :before and :after pseudo-elements. Unfortunately, the otherwise progressive WebKit browsers don’t support this property, which means no quotes are shown at all.

Example

The first two characters determine the quotes for the first level of a quotation, the last two for the second level, and so on:

q {
	quotes: '«' '»' "‹" "›";
}

These two lines assign the quotes to the selected element:

q:before {content: open-quote}
q:after  {content: close-quote}

So, <p><q>This is a very <q>nice</q> quote.</q></p> would give us:
«This is a very ‹nice› quote.»

Supported by: CSS 2.1., all browsers except WebKit, even IE 7+.

Further reading: W3C

Question: To add the character directly, does the CSS document have to have a UTF-8 character set? That’s a tough one. Unfortunately, I can’t give a definitive answer. My experimentation has shown that no character set has to be set for the quotes property to work properly. However the utf-8 character set doesn’t work because it shows “broken” characters (for example, “»”). With the iso-8859-1 character set, everything works fine.

This is how the W3C describes it: “While the quotation marks specified by ‘quotes’ in the previous examples are conveniently located on computer keyboards, high-quality typesetting would require different ISO 10646 characters.”

CSS3 Properties You May Have Heard About But Can’t Remember

To round out things, let’s go over some CSS3 properties that are not well known and maybe not as appealing as the classic ones border-radius and box-shadow.

text-overflow

Perhaps you’re familiar with this problem: a certain area is too small for the text that it contains, and you have to use JavaScript to cut the string and append “…” so that it doesn’t blow out the box.

Forget that! With CSS3 and text-overflow: ellipsis, you can force text to automatically end with “…” if it is longer than the width of the container. The only requirement is to set overflow to hidden. Unfortunately, this is not supported by Firefox but will hopefully be implemented in a coming release.

Example

div {
	width: 100px;
	text-overflow: ellipsis;
}

text-overflow

Supported by: CSS 3, all browsers except Firefox, even IE6+.

Further reading: W3C

word-wrap

With text in a narrow column, sometimes portions of it are too long to wrap correctly. Link URLs especially cause trouble. If you don’t want to hide the overflowing text with overflow: hidden, then you can set word-wrap to break-word, which causes it to break when it reaches the limit of the container.

Example

div {
	width: 50px;
	word-wrap: break-word;
}

word-wrap

Supported by: CSS 3, all browsers, even IE6+.

Further reading: W3C

resize

If you use Firefox or Chrome, then you must have noticed that text areas by default have a little handle in the bottom-right corner that lets you resize them. This standard behavior is achieved by the CSS3 property resize: both.

But it’s not limited to text areas. It can be used on any HTML element. The horizontal and vertical values limit the resizing to the horizontal and vertical axes, respectively. The only requirement is that overflow be set to anything other than visible.

resize

Supported by: CSS3, all the latest browsers except Opera and Internet Explorer.

Further reading: Safari Developer Library

background-attachment

When you assign a background image to an element that is set to overflow: auto, it is fixed to the background and doesn’t scroll. To disable this behavior and enable the image to scroll with the content, set background-attachment to local.

background-attachment

Supported by: CSS 3, all the latest browsers except Firefox.

Further reading: Safari Developer Library

text-rendering

With more and more websites rendering fonts via the @font-face attribute, legibility becomes a concern. Problems can occur particularly at small font sizes. While there is still no CSS property to control the subtle details of displaying fonts online, you can enable kerning and ligatures via text-rendering.

Gecko and WebKit browsers handle this property quite differently. The former enables these features by default, while you have to set it to optimizeLegibility in the latter.

text-rendering

Supported by: CSS3, all WebKit browsers and Firefox.

Further reading: Mozilla Developer Network

transform: rotateX/transform: rotateY

If you’ve already dived into CSS3 and transformations a bit, then you’re probably familiar with transform: rotate(), which rotates an element around its z-axis.

But did you know that it is also possible to spin it “into the deep” (i.e. around its x-axis and y-axis)? These transformations are particularly useful in combination with -webkit-backface-visibility: hidden, if you want to rotate an element and reveal another one at its back. This technique is described by Andy Clarke in his latest book, Hardboiled Web Design, and it can be seen in action on a demo page.

Example

If you hover over the element, it will turn by 180°, revealing its back:

div:hover {
	transform: rotateY(180deg);
}

transform: rotate

Quick tip: To just mirror an element, you can either set transform to rotateX(180deg) (and respectively rotateY) or set transform to scaleX(-1) (and respectively scaleY).

Supported by: CSS3, only WebKit browsers, in combination with -webkit-backface-visibility only Safari and iOS (iPhone and iPad).

Further reading: Safari Developer Library (transform: rotate, -webkit-backface-visibility)

Some Last Words

As you hopefully have seen, there are many unknown properties that range from being nice to hav to being very useful. Many of them are still at an experimental stage and may never leave it or even be discarded in future browser releases. Others will hopefully be adopted by all browser manufacturers in coming versions.

While it is hard to justify using some of them, the WebKit-specific ones are gaining more and more importance with the success of the iOS devices and Android. And of course some CSS3 properties are more or less ready to be used now.

And if you don’t like vendor-specific properties, you can see them as experiments that still could be implemented in the code to improve the user experience for users browsing with the modern browsers. By the way, CSS validator from the W3C now also supports vendor-specific properties, which result in warnings rather than errors.

Happy experimenting!

(al)

CSS,

↑ Back to top

  1. 1

    Great Post, the text-align: -moz-center/-webkit-center sounds interesting. And: Never thought that the support for “counter increment” is such spreaded in the browser world.

    0
  2. 2

    Great post. i was reading it and thinking that should be a long and long post. so interesting.

    0
  3. 3

    Nice work Christian! Thanks for pulling all this information together. Now, let’s not talk about compatibility—instead, experiment and enjoy what’s to come!

    0
  4. 4

    Great Post. I’ll have to try this zoom:reset thing on a mobile device, e.g. zoom only the text not the logo.

    0
  5. 5

    Here’s a question: while these CSS properties are great and all, will there ever be a time when all browsers render them properly and the same? I mean I’d love to use CSS3 and HTML5, but if the majority of viewers to my clients’ websites are using outdated browsers, what’s the point?

    0
    • 6

      Christian Krammer

      May 11, 2011 5:01 am

      One thing is to experiment. It’s always nice to see what current browsers are capable of. But what’s more important these days is the use at iPhone/iPad/Android apps. Their web browser are all based on WebKit and therefore are able to render all this shiny stuff.

      But if you are talking about a desktop browser environment you are quite right, many of them are just useless there if you are always aiming for a website that looks the same in every browser. But if you think a little bit outside the box you can progressively enhance your websites with this properties and reward the users who use modern browsers. Maybe you want to think about that …

      0
      • 7

        So really if I wanted to keep the website looking the same in every browser, then I could just use CSS3 properties for the mobile version only.

        On another note, are there scripts out there that detect whether or not the viewer is using a webkit browser capable of displaying CSS3 properly?

        0
        • 8

          You need to check out Andy Clarke and his idea about sites looking the same everywhere. It’s really silly to think that IE6 should provide the same look and experience as Firefox 4. That’s an extreme case, but design-think/graceful degradation is now evolving from the best of the best to very nice to nice when looking across different browsers. Start at the top first and then trickle down!

          Also, vendor pre-fixes aren’t bad. Thanks to Eric Myer and Dan Cedarholm, there isn’t any reason to continue researching and wondering….use CSS3 w/all the browser pre-fixes and stick the pure declaration at the end.

          0
      • 9

        Jeremiah Reagan

        May 11, 2011 6:21 pm

        It’s nice and “painful” at the same time, lol. And you should know what I mean Christian – Their are so many browsers now and so many different platforms from HTML5, CSS, PHP, ASP.NET, then you have mixtures of them with WordPress, Joomla, Drupal etc, and yet if you open up a site in “X” browser as opposed to “Y” they really do look like 2 different sites. That’s what drives me absolutely NUTS! Don’t know about you? And the IE9 release that’s scheduled for June 10th or whatever (it’s somewhere around that date), is going to take it on the “chin” because as of right now I have found about 60% of wordpress and drupal sites with MAJOR “Text” compatibility issues.

        Cheers guys, and very well written Christian!
        Jeremiah R.

        0
        • 10

          Christian Krammer

          May 11, 2011 10:00 pm

          You are right Jeremiah, things are not getting any easier. Every new browser release means more work for us. But like Kelly before you said no site has to look the same in every browser. On one hand nobody will check a site on two different browsers and on the other hand there is no need that websites look equally well in older browsers. Because if you use such a browser you have to live with that fact that you can’t get the whole “experience”.

          0
          • 11

            Nobody? Here we are used to check our sites in IE7+, Fx, Opera and Chrome – usually when we didn’t do this, few days later the customer called us asking why there was a problem with button X or border Y in his browser Z.

            Of course, there are many details we don’t try to make to look the same way on every browser, but I wouldn’t agree on that it doesn’t matter. Even if your customer use the same browser you do, you can’t rest assured his wife, son or anyone else won’t come to him saying his site looks bad in other.

            0
        • 12

          You mean the codes copied from ms word that only microsofts explorer 9 chokes on? It costed me a lot of time to adjust it on a few sites.

          i will celebrate the day that IE stops making their browsers

          0
  6. 13

    Really nice! Every time I think there is nothing left to learn up pops a post like this and I learn something new :)

    0
  7. 14

    -webkit-user-select and -moz-user-select can be useful in web apps! :)

    0
  8. 15

    Just to say, I was developing a page for a touchscreen kiosk yesterday and being able to make text not selectable was really useful. But I would agree that generally you don’t want to do it.

    0
    • 16

      Very good point.
      I think that in the attempt to standardize the web we make an effort to give many of our designs a “webby” feel, while non selectable text gives the feeling of a picture and reminds us of non SEO flash sites.

      Behaviors like hover, changes in the mouse cursor, alt-text/title-text, etc, including the ability to select, help define the purpose of different visual elements.
      Small pieces of text that compose the sites interface but are obviously not site content don’t have very good reason to be selectable, with a technique like the one stated here, we can keep our site readable on different browsers, search engines and so on, but still get that App feeling from our WebApp (where things behave the way they are expected in the interface and not just the way HTML naturally dictates).

      Though I do agree that this feature should be used sparsely and with care.

      0
  9. 17

    Stefan Rechsteiner

    May 11, 2011 4:58 am

    there is also a «-webkit-text-size-adjust»

    0
    • 18

      Christian Krammer

      May 11, 2011 5:07 am

      You are right, but I heavily relied on the official specs at the Safari Developer Library: http://bit.ly/ij3RHS. And unfortunately -webkit-text-size-adjust isn’t listed there.

      0
  10. 19

    Excellent post, this is a really clear and condensed look at the new CSS3 properties designers and programmers should be using and investigating. The only trouble is ensuring there are substitutes or work-arounds for older browsers if you need to ensure that all users are guaranteed the same or similar visual effects and properties. Browser compatibility and best practice will always be a hindrance to the latest technology if you are targeting a global audience. Lets hope things get better… yes microsoft, i’m talking to you!

    0
    • 20

      Christian Krammer

      May 11, 2011 5:10 am

      The most important application for most of these properties are iPhone/iPad/Android Apps. And fortunately you don’t have to care about other browsers there. :)

      0
  11. 21

    -moz-crisp-edges actually looks worse than the optimized image.

    0
    • 22

      Christian Krammer

      May 11, 2011 5:17 am

      Yes, it’s only for illustration at the picture of the sunflower. The main purpose is to maintain sharp lines at images (like you can see at the checkerboard).

      0
  12. 23

    Gr8 post. You’ve probably summed up all the features that we don’t usually use, don’t know they exist or totally forgot about them.

    Thanks!

    0
  13. 24

    Great article,
    It would be also great if all the popular browsers would support this things.
    I think all of them will do this except IE.
    What about IE hacks of this CSS3 things?

    0
    • 25

      Christian Krammer

      May 11, 2011 5:29 am

      Like I stated at a post before the main purpose for many of these properties are iPhone/iPad/Android Apps. Unfortunately there is no substitute for almost all other browsers and probably there will never be one. And especially IE will never support a single one of them. ;)

      0
  14. 26

    About quotes and charsets they’re encoded in: You have basically two options. One is the stylesheet to remain purely ASCII and using CSS escape sequences: The opening Guillemet then is represented by “0AB” instead of “«”.

    The other is to send the used character set together with the CSS file. You can do this either with HTTP headers (“Content-Type: text/css; charset=UTF-8″) or by declaring this in the stylesheet itself, in the very first line:

    @charset “UTF-8″;

    If your stylesheet then has an other encoding than the HTML page, the browser will automatically convert all non-ASCII items.

    0
    • 27

      OK, obviously, backslashes are stripped. So, the escape sequence looks like

      “backslash” + “00AB”,

      where “00AB” is the Unicode codepoint of the character in question.

      0
  15. 28

    Really time I start messing around with all those new CSS properties. Pretty amazing what can be done nowadays with CSS only!

    0
  16. 29

    Great post.. Thnx

    0
  17. 30

    Great article!

    I can already think of some great applications for some of these properties.

    0
  18. 31

    Kashif M Qasim

    May 11, 2011 7:22 am

    Greatly put together, well done Christian. Thumbs up!

    0
  19. 32

    It would be nice to let us know what browsers these properties currently work in.

    0
  20. 34

    About -webkit-user-select and -moz-user-select… I could see a use for these when you have a clickable element that’s not a link. For example if you have a div containing text that is supposed to trigger some javascript when clicked, then it would be inconvenient to have the div’s content become highlighted when you clicked it. Just a thought. Great article though.

    0
  21. 35

    Have we ever considered using a ordered list to number a ordered list?

    Shocking, right?

    http://www.w3schools.com/Css/css_list.asp

    0
  22. 36

    There’s other experimental CSS properties in Gecko such as filter, mask, and clip-path which can apply SVG effects on html content, that I feel is significant enough to note here.

    They can do almost the same thing as -webkit-mask except use a defined SVG image (with clip-path:url(#svg); ) instead of PNGs or CSS gradients, also I discovered Safari can use an SVG image with -webkit-mask, but Chrome can’t.

    0
    • 37

      Christian Krammer

      May 11, 2011 10:04 pm

      Thanks for the suggestions Jason but I had to make a cut somewhere because otherwise the article would have been too long. It already is quite a lengthy one. ;)

      0
  23. 38

    Nice article. I would add the CSS tab-size property, which was proposed on the www-style mailing list but not specified it seems. Supported in Opera with -o-tab-size and in Firefox with -moz-tab-size, it allows to define the width, in spaces, of a tab character. Useful for displaying code which uses tabs (default is “8″).

    0
  24. 39

    Michael Persson

    May 11, 2011 9:37 am

    HTML5 with CSS3 Is really fun, I have been playing with CSS3 for many years since before the implementation started and it is really useful for today’s standards and web browser to give the options of making things be useful… It is for sure the future of making websites faster, better, more useful and accessible…

    0
  25. 40

    wow, those are awesome! thanx!

    0
  26. 41

    WOW…awesome the articles
    thanks

    0
  27. 42

    Most of the links to the W3C go to the word wrap section. Some of the Safari Dev links don’t actually link to the section you talk about. You should probably update those or remove them.

    0
    • 43

      Christian Krammer

      May 11, 2011 10:29 pm

      I am very sorry for the inconvenience Andrew. I really missed to update all the links to the correct specifications. I have fixed that now.

      0
  28. 44

    Font aspect ratio isn’t a fixed value but varies with font size.
    For Verdana:
    0.58 at 12px
    0.56 at16px
    0.55 at 20px

    0
  29. 46

    Wow! Thanks for the info. This was a good read. :)

    0
  30. 47

    I’ve been doing a lot of testing against Opera 11.10 and 11.50 lately, and I’m really impressed with how the CSS3 support is maturing. When you discuss features as “not being supported by Opera,” my personal bet is that you’ll either find it with some ‘-o-’ prefix somewhere, or the feature will show up in the (currently evolving) 11.5 release. Given that Opera deploys as widely as Webkit now, it really ought to be getting more attention than it has been, from devs and users.

    0
    • 48

      Christian Krammer

      May 11, 2011 10:37 pm

      Since Opera isn’t still that wide spread (I have some statistics that prove that) I renounced to take Opera into consideration for this article. Moreover the article would have been too long then.

      0
  31. 49

    css3 is the new photoshop ;)

    0
  32. 50

    Good post!!!!!!!!

    0
  33. 51

    Very nice post.

    Just wondering do we really use them? Or should we use them or not?

    I am used to testing websites in IE6-IE8… now IE9 too, Mozilla Firefox, Safari, Netscape and Chrome (Quite latest ones).

    I really didn’t use these properties yet though one or two i.e. corner borders etc.

    0
    • 52

      Christian Krammer

      May 11, 2011 10:40 pm

      Like I said before at the comments these properties aren’t made for an everyday use at a desktop browser environment. They more aim for iPhone/iPad/Android Apps, because there WebKit is the only browser and you don’t have to care about other ones. Moreover sometimes it’s fun to just experiment a little bit and see what’s possible.

      0
  34. 53

    good post, Christian, thanx.

    0
  35. 54

    Wow, a lot of interesting stuff here. Thanks for putting this together, Christian.

    It should be noted that word-wrap actually works in pretty much every relevant browser and version. That means IE6+, Firefox 3.5+, and at least a few versions back for all the rest as well.

    0
  36. 56

    Kartlos Tchavelachvili

    May 12, 2011 12:49 am

    The post was interesting, thanks

    0
  37. 57

    One really useful one that you missed is calc(). Currently it’s only supported in Moz, but what it does is let you do a sumto calculate widths and heights.

    #container {width: 100%}
    #container #fixed {width: 25em;}
    #container #fillup {width: calc(100% – 25em)}

    Doesn’t sound like much, but it lets you do the one thing tables do really well but has never really been possible to a really satisfactory extent in CSS, make one element a fixed width and then make its neighbour take up any space that’s left over after that. Anyone who has had to wrestle with multi column layouts, especially fluid ones, should see the benefit of this.

    0
    • 58

      Christian Krammer

      May 12, 2011 1:29 am

      Thank you very much for the tip. Fortunately there are visitors like you that point at these properties and extend the article through that.

      0
  38. 59

    Such a good write, you done a great job christian..

    0
  39. 60

    Really great article!!! thank you

    0
  40. 61

    Why bother with quote tag, when you can type « » directly?

    0
    • 62

      My first thought was for translation. Quote marks are different in many languages, so being able to use a tag and style combo would be great rather than having to type them out. Unfortunately without full browser support it’s not as useful.

      0
    • 63

      Christian Krammer

      May 13, 2011 11:35 am

      Because like that they are automatically inserted, which is the way to go if you want to make things semmantically correct.

      0
  41. 64

    Once you start dealing with one browser functionality, you abandon most of your readers. Except for corporate programmers who can count on only one browser interpreting their code, something that targets only webkit or only mozilla, or only IE8 is a curiosity, nothing more.

    0
  42. 65

    Using max-width, min-width, max-height and min-height on an element that is resize-able allows you to limit the height/width the user can resize the element too.

    form textarea {
    width: 200px;
    height: 100px;
    max-width: 250px;
    max-height: 500px;
    min-width: 100px;
    min-height: 50px;
    }

    0
  43. 67

    How WE can W3C Valid css3

    0
  44. 68

    Great work by Christian Krammer

    But i want to know that is all these “CSS Properties” will work on IE6, IE7, IE8 . If not please suggest any idea.

    Thanks

    0
    • 69

      I see this question asked every time there is a post about CSS3 and the answer is never! IE6, IE7, IE8 will never support these features as they are out of date browsers that are no longer being developed. IE9 is the current version and that is not being developed any more as Microsoft are working on IE10.

      Its like movie companies saying we won’t release films in HD until VHS supports it.

      The answer to the problem of dealing with IE6, IE7 and IE8 is so simple:

      http://dowebsitesneedtolookexactlythesameineverybrowser.com/

      Hope this helps!

      0
  45. 70

    Thanks for the info, some of those look really interesting.

    Unfortunately, experimenting is becoming the only fun part when working with CSS since 90% of the new and most exciting properties are browser exclusive and at the end you end up using javascript techniques to achieve what you want.

    Hurray for web standards!.

    0
    • 71

      Christian Krammer

      May 13, 2011 11:42 am

      Amrimder and facundo, please read one of my answers to the posts above. Many of the properties I describe are not meant to be used at a desktop browser enviroment but more at iPhone/iPad/Android Apps. And there you don’t have to care about other browsers. And of course experimenting, because that’s the way to advance things.

      0
  46. 72

    great article and CSS evolutions…
    However, hoping IE can follow this type of CSS rules as soon as possible.
    IE9 is getting better, but how many people are aware and using IE9? Hahaha…

    0
  47. 73

    One of the best CSS articles I have read recently!! Great explanation and worth tagging for further reference. :)

    Ameya

    0
  48. 75

    Really a very good article Chris, you have done a great job. Yes! we can say CSS3 is like a photoshop.

    But unfortunately, i think more than 80% users in the globe uses IE, even i have seen IE 6 still running in many computers and people don’t know how to update or they don’t care about it.

    IE is the biggest pain while designing the websites, i don’t know why they have different standards. I suggest they should stop making / updating browsers.

    I can say, designers still need to wait for another 2 years to implement all above mentioned properties (till IE starts implementing them :p)

    0
  49. 77

    Alysson Franklin

    May 16, 2011 1:53 am

    Gr8 article m8! But I have my doubts abt the text-overflow technique on firefox. This is something that we are urging to firefox devs on the early days of firefox 3 and so far nothing. We had at least 3 different releases and nothing was made. But there’s even more: the firefox4 removed the support for XUL, so not the famous (and tricky) on bindings.xml is not valid anymore. So far I’ve been using the text-overflow, but the fallback degrades gracefully to XUL ’til ffox 3.6 and a jquery plugin for truncate ffox4(and above).

    0
  50. 78

    Interesting stuff, but I think the reason radius and shadow properties have gotten so popular is because they still support progressive enhancement. IE doesn’t have to have rounded corners and everything pretty much works fine. Same with shadows, but a lot of these features would render a site broken in IE. Still nice to know what we might be able to use in 5 years. ;)

    0
  51. 79

    -webkit-user-select and -moz-user-select are really useful properties! don’t use them with the “none” value for an entire page, but for web-only descriptions/instructions. ;) e.g. i would hate to copy-paste a “share this” link or a “show more/less” link (with javascript-controlled visibility). or think about sub-menu elements in a drop-down menu, and so on…

    0
  52. 80

    This is such an awesome article. There are a couple properties I’ve never even seen used in practice, but I can absolutely see myself using them!

    If only you wrote an awesome CSS Cheat Sheet! Thanks for the post!

    0
  53. 81

    I’m not sure which vendor-specific properties are being treated as warnings by validator, but recently it told me that -moz-opacity is an error.

    0
  54. 82

    Great article. Is there any advanced “experimental” CSS multi-line ellipses solutions? Meaning the ellipses is applied when a container width and height is exceeded?

    0
  55. 83

    You said “It’s also worth mentioning -ms-interpolation-mode: bicubic, although it is a proprietary Internet Explorer property.”

    -ms-interpolation-mode: bicubic; is no more proprietary than all of these other experimental webkit and gecko specific properties. Really none of this is actually CSS3:
    http://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies/

    Nice list though!

    0
  56. 85

    m a aleem - fahd4007

    August 15, 2013 9:54 pm

    hi,…

    what the Post….

    great and thank you for sharing your exp.

    specially the
    -moz-border-top-colors: red yellow blue; >>> 8)

    and
    -webkit-mask: url( img path );

    thank you

    fahd4007.deviantart.com m a aleem -aka- fahd4007 web graphic desinger

    0

↑ Back to top