10 astonishing CSS hacks and techniques

by Jean. 103 Comments -

Well, I guess that almost all of you knows CSS and what it can do for you. But some astonishing techniques still remains obscure for a lot of developers. In this article, let’s see 10 cross browser css techniques to definitely enhance your designs.

1 – Cross browser inline block

<style>
    li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        margin: 5px;
        zoom: 1;
        *display: inline;
        _height: 250px;
    }
</style>

<ul>
        <li>
                <div>
                        <h4>This is awesome</h4>
                        <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75"/>
                </div>
        </li>
        <li>
                <!-- etc ... -->
        </li>
</ul>

Source: Cross browser inline-block property

2 – Disable Textarea resizing for Safari

/ * Supports: car, both, horizontal, none, vertical * /
textarea }
      resize: none;
}

3 – Cross browser rounded corners

.rounded{
    -moz-border-radius: 5px; /* Firefox */
    -webkit-border-radius: 5px; /* Safari */
}

Source: Border-radius: create rounded corners with CSS!

4 – Cross browser min-height property

selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}

Source: Min-height fast hack

5 – Image Rollover Borders That Do Not Change Layout

#example-one a img, #example-one a { 
    border: none; 
    overflow: hidden; 
    float: left; 
}

#example-one a:hover { 
    border: 3px solid black; 
}

#example-one a:hover img { 
    margin: -3px; 
}

Source: Image rollovers that do not change layout

6 – Cross browser transparency

.transparent_class {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

Source: CSS transparency settings for all browsers

7 – Lighbox in pure CSS: No Javascript needed!


Source: Lightbox effect in pure CSS: No javascript needed!

8 – Cross browser pure css tooltips

<style type="text/css">
a:hover {
    background:#ffffff; 
    text-decoration:none;} /*BG color is a must for IE6*/
    
a.tooltip span {
    display:none; 
    padding:2px 3px; 
    margin-left:8px; 
    width:130px;
}

a.tooltip:hover span{
    display:inline; 
    position:absolute; 
    background:#ffffff; 
    border:1px solid #cccccc; 
    color:#6c6c6c;
}
</style>

Easy <a class="tooltip" href="#">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>.

Source: Easy CSS Tooltip

9 – Set color of selected text (Firefox/Safari only)

::selection {
    background: #ffb7b7; /* Safari */
}

::-moz-selection {
    background: #ffb7b7; /* Firefox */
}

Source: Use CSS to Override Default Text Selection Color

10 – Add File Type Icons next to your links

    a[href^="http://"] {
    background:transparent url(../images/external.png) center right no-repeat;
    display:inline-block;
    padding-right:15px;
}

Source: Add File Type Icons next to your links with CSS

Comments (103) - Leave yours

  1. Sumesh said:

    Some neat tricks there, I liked the cross-browser inline block elements, minimum height and pure-css lightbox solutions a lot, will probably use them in future projects. Bookmarked!

  2. Kevin Choppin said:

    Nice post, in addition to the transparency solution, here is a good post about preventing children elements from inheriting the opacity.

    http://www.stevenyork.com/tutorial/pure_css_opacity_and_how_to_have_opaque_children

  3. Alwaison said:

    Good tips! Very useful, really.

    Only one thing to add to the Cross browser rounded corners post:
    There’s also another property, -khtml-border-radius.

    That is for the khtml based browsers, most used in linux systems.
    And, why not, I never forget to use the W3C standar, border-radius. Some day, all browsers will support this, dont forget! :)

    Thanks for the recopilation.

  4. dave morley said:

    i’m getting sick of these “cross-browser” selections that totally are NOT cross browser. cross browser rounded corners does not work on any IE. you even list firefox and safari as your huge cross browser compatibility list! are you not aware of any other browsers? cross browser transparency does not work in chrome. the list goes on… this is a collection of css markup which works in SOME browsers. a little pathetic.

  5. Timothy said:

    That cross-browser rounded edges is not cross-browser. What about IE?

    And you are missing this opacity attribute:
    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=##)”;
    This was used in IE8 Beta. The KHTML isn’t really necessary since the market share is so low.

  6. Jean-Baptiste Jung said:

    @dave morley: I know this article was reffered on Digg and other social bookmarking sites as “Cross browser hacks”, but the title of the article is “10 astonishing CSS hacks and techniques” and I did not stated that all hacks are cross-browser.

    For rounded corners IE compatibility, there’s a .htc file which allow you to do it.

  7. Lisa said:

    Stunning list, thank you! Can’t believe how much I need min-height and it always acts weird. However, this is the first full-proof fix I have seen.

  8. john said:

    The inline-block source you listed is actually a rip from Mozilla:
    http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

  9. stk said:

    #7 is false. Very disappointing.

    “No javascript needed” ??

    It fails without JavaScript and worse, it doesn’t even degrade nicely.

    Some REAL CSS techniques:

    [ADMIN EDIT: No links in comments, Thanks!]

    and more …

    Cheers.

  10. J Mehmett said:

    The Lighbox in pure CSS without JS is really awesome. There are tons of things CSS can do without the need of JS. Cross browser inline block in rocking too.

    Thanks for sharing…

  11. Website Design Services said:

    I cannot wait until CSS3 is supported by all browsers. It bugs me that only Firefox and Safari can handle certain CSS3 techniques. I really wonder when more browsers will support CSS3.

    Nonetheless, thank you for the CSS hacks and techniques. I will have to save this for when I need it.

  12. Venerator said:

    People like dave morley and Timothy make me laugh out loud.

    Dave, why whine about the lack of focus on Internet Explorer? I don’t think round corners are worth the hassle involved in making them work in IE8, unless a client wants to pay the big bucks. For a personal blog, one that is demonstrating CSS effects, can you really blame them for showcasing effects that IE doesn’t support? The fact that other examples are laden with non-validating CSS hacks for IE’s sake clearly missed your keen eye.

    And Timothy, I think an extra line of CSS to support a few Konqueror users isn’t a huge loss. Frankly I don’t understand the hate here, given that you seem willing to use non-validating, less secure techniques like CSS expressions to achieve the same effect.

  13. Eiencafe.com --> New way to graphic said:

    Weekly Fave’s…

    Finally I have the time to search the web for the weekly fave’s Let’s see…
    Week from June 14 to June 20, 2009:
    Tutorials
    Photoshop Create a Kick-Ass Martial Arts Scene How to Create a Gorgeous Glassy Text Effect How to Design a S…

  14. Anders Johnsen said:

    “[ADMIN EDIT: No links in comments, Thanks!]” <– What’s that all about?

    stk is absolutely right that the so called “No javascript” lightbox actually depends on javascript. I’d love to see the other techniques that were linked to. Having said that, it’s still a pretty nice lightweight solution.

  15. Jean-Baptiste Jung said:

    @Anders Johnsen: I’m tired that some people use comments to put links to their own websites. CWC is dofollow, so people get a backlink each time they let a comment. That’s already cool, isn’t it?
    To be honest, I don’t remember what the link was about, but if I decided to remove it it was probably irelevant.
    If you have a relevant link to illustrate that the “No JS lightbox” uses javascript, it is of course welcome on here.

  16. Ximena Eduarda said:

    Wow! Great post and for me a very valuable gift. I know CSS only as much as I needed to learn in order to build my site and 7 out of 10 things you mention I will use. Thanks a lot for sharing!

  17. Jeet said:

    I really liked the disabling of textarea in Safari, the resizing can deform some pages badly. Recently saw another ‘drop_cap’ style with css, you should also check it out.

    Lightbox is the best and most surprising of these tricks you shared.

  18. stk said:

    @Jean-Baptiste Jung,

    I understand you’re tired of ppl who link to their own site.

    Firstly, however, our site is already linked by way of the “website” field.

    Secondly, the specific articles I included and linked were relevant to the article, which is about “astonishing CSS hacks and techniques.” (Both links were pure-CSS techniques: CSS Photo-caption Zoom and CSS popINFO. They are authored by me. What’s crime is that?).

    What I find tiring are articles titles that utilize superfluous adjectives like “astonishing” and worse, when they are blatantly misleading (like #7 – “Lighbox in pure CSS: No Javascript needed!”, which is pure hogwash because JavaScript IS necessary for the technique to work!).

    What I further find tiring is a double-standard approach to comment moderation, whereby an administrator picks and chooses what comments are added and what links shall be included or not included. Obviously links are accepted (as I noted in comment #3 and #19, prior to adding my own links).

    You wrote: “If you have a relevant link to illustrate that the “No JS lightbox” uses javascript, it is of course welcome on here”.

    Well, here is my new link, which pretty much definitively illustrates that the “No JS lightbox” requires JavaScript –> http://is.gd/1dkpF

    Cheers,
    -stk

  19. Jean-Baptiste Jung said:

    @stk: Yes, people are welcome to link their site in the “website” text field. This link is dofollow btw.
    If your first links were relevant and removed, I apologize for that. This post received lots of spammy comments and I have to check it to ensure the quality of the discution. Some people don’t hesitate to write “hey, check out this CSS technique” and link to an online casino…

    Therefore, there’s no censorship on this blog. I don’t choose which comments have to be published. I don’t have a problem with negative feedback and I respect freedom of expression for everyone.

  20. stk said:

    Thank you, Jean-Baptiste. Apology accepted. I can assure you, it’ll be a very chilly day at the center of the Earth before I submit a link for an online casino in a comment. ;-)

    Here are three pure-CSS techniques, authored by me, which your readers may find adds value to the interesting content contained in this article.

    Photo-caption Zoom</a Styling an Ordered List
    popINFO

    Cheers,
    -stk

  21. 6月分享总结 « Kejun’s Blog said:

    [...] 每周技术分享(6.19) 1. CSS性能在Yahoo!çš„34条性能原则中提及不多,而在Google Page Speed有这方面的规则。之前,很容易忽视这块。 Steve Souder分析CSS性能的文章: http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/ http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/ 文中有引用、有测试、有分析写的相当精彩。总结就一句话,简化CSS选择器。文中分析了”*”通配符和层级太多的选择器对性能的影响。同时不建议大量写复杂的匹配,让每一条CSS Rule作用范围尽可能的大。 2. Hedger最近写的一个图片预览的库,包含了不同浏览器图片处理的技巧,源码很值得一看。像FF3支持一个叫getAsDataURL()的方法,通过 它可以取得文件的Base64编码,从而判断文件的真实格式。FF下图片有naturalWidthå’ŒnaturalHeight属性可以得到图片的真实 宽高。源文件: http://code.google.com/p/image-upload-preview/source/browse/trunk/imageuploadpreview.js 前两天看了一篇日文文章,介绍获取页面中图片的真实宽高,也很有意思: http://d.hatena.ne.jp/uupaa/20090602/1243933843 3. HTML5离我们并不遥远了。这篇文章写的不错,“HTML 5: Could it kill Flash and Silverlight?”,技术背后是激烈公司竞争,做为开发者只能保持清醒的头脑,认清技术发展的趋势 http://www.infoworld.com/print/79291 4. 再介绍一些不错的文章: CSS3其实离我们更近。CSS3将把Web设计带到一个新的阶段: http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/ “10个令人惊讶的CSS Hack和技术”这是作者的标题,有些确实挺有用的: http://www.catswhocode.com/blog/10-astonishing-css-hacks-and-techniques [...]

  22. j.j. said:

    .transparent_class {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    }
    This is really out of date, see
    https://developer.mozilla.org/en/CSS/opacity#Browser_compatibility
    Let me summarise (partly stated in other comments):
    1. Konqueror NEVER SUPPORTED “-khtml-opacity”, this was for Safari 1.0-1.1
    2. Konqueror 4 supports “opacity”
    3. “-moz-opacity” is needless since Firefox 0.9
    4. IE8 likes quotes, the long form is not needed

    So this is state of the art, these days:
    opacity: 0.5; /* Firefox, Safari(WebKit), Opera */
    -ms-filter: “alpha(opacity=50)”; /* IE 8 */
    filter: alpha(opacity=50); /* IE 4-7 */
    zoom: 1; /* set “zoom”, “width” or “height” to trigger “hasLayout” in IE 7 and lower */

    j.j.

  23. Nihar said:

    Great hacks and techniques.

    Can you change the flower brace . something wrong at 2 – Disable Textarea resizing for Safari

    textarea }

    to textarea {

  24. Ravi said:

    Thanks for such a great collection of CSS tricks.So many of them at one place ,Amazing!! I have bookmarked the page for future use.

  25. David Latapie said:

    Image Rollover Borders That Do Not Change Layout >Why don’t you just use outline? Outline is border “over” the block, not “around”. Much simpler. Or I just missed a part (please don’t tell me it is IE compatibility).

  26. David Latapie said:

    Sorry, I did not read the source before commenting. It says: “Outline is nice, but it is limited in that you cannot apply one side or another. It’s all or nothing. Also, outlines can only be applied outside an element.” I don’t understand the second part of it, but still…

  27. Healthcare Management said:

    Cross browser rounded corners , Cross browser transparency, Lighbox in pure CSS without use of JS these are the best for me about some of i know little bit this are totally new for me to also soon wanted to implement.

  28. sherone said:

    Is proper validation really that big of a deal? I mean, seriously, what honestly matters is that the code works well with everything. Validation should be a secondary priority.

  29. Adrian said:

    I didn’t bother to read the comments first.

    You are over-using the term “cross browser”, for instance, “cross-browser rounded corners” only work in WebKit and Mozilla browsers, that is NOT Internet Explorer earlier than Explorer 9 (or 10 or 11), which still has more than 75% of the Internet market.

  30. stk said:

    Jean-Baptiste,

    All summer long, I’ve sat back and watched #7 “Lightbox in pure CSS – no JavaScript Necessary” awarded undue attention.

    Finally, I’ve done something about it!

    The title is a lie, as that technique relies upon (and fails miserably without) JavaScript. Even as a JavaScript technique, it’s crap. I’ve explained why and provided a accessible, web-standards version, which fixes several visual breaks and allows it to – for the first time – work in IE6.

    Here’s the Article

    (Hoping you’ll see fit not to mow it down this time!) :-p

    Cheers,
    -stk

  31. fiddlestixx said:

    Nice! In my opinion CSS-Hacks are overrated, they are rather providing a potetial lack of upward-compability. That is why I would recommend the following for inline-block elements to avoid depreaceated css-syntax:

    .selector {
    display:table-cell;
    display:inline-table;
    display:inline-block;
    }

    got it from here:
    spartanicus.utvinternet.ie/centered_image_gallery_with_captions.htm

  32. Brad Tommy said:

    A Note About CSS Hacks. It’s worth noting that I’m not advocating the use of hacks in your stylesheets in any way. On the contrary, you should almost always use conditional comments.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!