CSS solutions as replacement for Javascript

There are lesser known CSS properties that can replace Javascript function to boost site performance. Common problems like selecting specific elements, ellipsis and many more. If you've read Site Point's CSS facts and the sequel then do not confuse with this one. This post is about CSS replacement with Javascript. However many of them have browser limitations.

Ellipsis

Blog posts with ellipsis are usually done with Javascript. When I first started working with Masonry that let me handle the situation when I do not know how much length will blog title and content will hold. In those cases I used Masonry to make the content dynamic and used Javascript to make content shorter so that it could fit in small space.

In Javascript we use to do like this.

1
var bodyText=$('.post-body').text();
$('.post-body').text(bodyText.substr(0,120)+"...");

Using text-overflow

Okay this one is quite popular but this one works for single line when white-space is set to nowrap. If you think that your content is single line and white is on nowrap then using text-overflow.

1
text-overflow:ellipsis;

Browser support is good too.


IE 6	Chrome 4	Firefox 7	Opera 11 -o- 9	Safari 3.1

I found that multi line ellipsis is possible with text-overflow property but works only in Opera. Here is the code.

1text-overflow: -o-ellipsis-lastline

Using CSS generated content

This one works for multi line. This is kind of hack but works as demanded. The pseudo-elements that could be :before or :after is set to position absolute and placed to show ellipsis text that is "...".

But you know what there are several limitations here. First, this one is supported in IE8 but make sure to use CSS 2.01 syntax of single colon ":before" or ":after" instead of "::before" or "::after". Secondly, the last line might show half, since it is set to overflow hidden. So make sure to put any multiple of line height. Like multiple of 30 is 150.

Input value under or out of range

Well not much rare case when you want to highlight the input when the value is a number that is under your range or highlight when out of your range. This is mentioned in a one of my post I published a few days back. This one is for number input, which is one of the type supported largely (but not completely).

Input have min and max attributes to set which determines the range of it.

1<input type='number' min='20' max='40'/>

If the typed number is greater than 40 or lesser than 20 than :out-of-range is used as pseudo class for style and if it is in the range then :in-range pseudo class is used for style.

There are several browsers that do not support min and max attributes (this is the reason we call them partially supported) and even not supported input type number at all. You can read the full post about number input type here.

Well if you get the message that "This browser does supports input type number" and you are still unable to get CSS result than your browser partially supports this feature. Click here for complete browser reference for number.

Counter

Not to mention but almost all now are familiar with counter, if you don't now you will. Counter are basically can be created with Javascript or use <ol> tag for listing the item with count. But that is not enough when you need customization and counter to other tags.

There are two properties to be used:

1counter-reset: none|name number|initial|inherit;
counter-increment: none|id|initial|inherit;

Counter-reset property let you reset the counter of specific name. Once counter is reset then use counter-increment property to increase counter value with each element. I've seen this one used only with pseudo content.

In this case counter-reset property is used on element that is not going to be repeat more than once, if this was used on h2 then, counter will reset on each h2 tag and will get "1" before each heading.

Cases when we create decimal counting then we use them on specific tag. Click here for demo.

Accordion and Tabs (Not a best choice)

Accordion and multi tabs are best to create with jQuery but you can create them with CSS using radio input. The CSS selectors are enough to make it, if the selector is like:

1
div + p {}

This means: selects all <p> elements that are placed immediately after <div> elements. So if we put checkbox:checked instead of div as button and container as accordion content as p then you can simply target the content with checked checkbox. I know bit complex, lets make it easy with this demo.

Native elements are used to create this accordion. Label tag toggles the check therefore buttons are created with label while content could be any container. All the inputs have same name attribute to get one checked radio button at a time.

Same technique but different markup and you will get multi tabs with pure CSS.

Pros and Cons

CSS is easy to code and you can make some complex stuff out of it. Radio and check box's behaviour are quite helpful to make the stuff more easy. CSS selectors and specially CSS3 selection is even more powerful.

On the other side, Javascript let you handle the content more finely. You can toggle classes and perform complex animation. For ease you can use jQuery UI elements and even you can use jQuery plugins and Javascript plugins for this purpose. These will have better browser support.

Any thoughts? add in comments.