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
My name is Jean-Baptiste Jung and I'm the man behind Cats Who Code. I started to use the Internet back in 1998 and started to create websites three years laters in 2001.
69 Comments
wow awesome trick for style css ..
i really need this, this what i looking for .. thx for your help
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!
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
Wow!! I have just started learning how to use CSS and I think what you have shared with us here is really something. Many thanks
This is really a great collection of code. Thanks so much for this. Am saving on delicious.com.
“Cross browser transparency” is great tip but w3 isnt like this
Thank you.
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.
Great collection of different hacks. I’m going to stumble!
Thanks everyone for the nice comments, the diggs and the saves
Never knew those kind of tweaks and hacks are possible. Thanks Jean!
Really good article.
Wow.. i think this article is very helpful for me to make over my website. I like the light box script. Thanks
Thanks very much for the information, it looks like you’ve got this programme cracked!
very good list indeed
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.
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.
@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.
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.
The inline-block source you listed is actually a rip from Mozilla:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
Excellent list. It always good to know some extra pro hacks for CSS. Bookmarked and starred
. Thanks for sharing
This is such a great list… ReTweeting it as we speak!
#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.
This is awesome. I’m gonna go and try a few of these right now.
Those are indeed Fascinating techniques.
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…
awesome set of hacks. Thanks very much for sharing this info
How on earth do you work these things out?
I ike the corss browser transparity hack, its really appealing and can be quite useful, but have to make sure background colours dont clash with the dropdown menus
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.
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.
Wow it has a lot of good collection & they all are amazing tricks i am gonna to check it out & also sharing it with the friends!Thanks for it!
These tips will really help me. Thank you for posting this
“[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.
@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.
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!
Nice tricks ! thx
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.
@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
@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.
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
This list will come in very handy. Thank you for putting it together. The Lightbox in pure CSS tip is pure gold. Muchos gracias.
@stk: You’re welcome. Maybe I’ll list some of theses technics in a future post
Love the tricks, thanks so much.
That’s very usefull, thanks. I’ll use this tricks in my homepage
# 9 was exactly what I had been looking for. You have no idea how long. Thanks a million.
.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.
Great hacks and techniques.
Can you change the flower brace . something wrong at 2 – Disable Textarea resizing for Safari
textarea }
to textarea {
man Lighbox in pure CSS is simply a beautiful and very cool tip , thanks again
You are master of CSS hacks.I liked Cross Browser Transparency hack.Thanks.
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.
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).
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…
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.
Most of this is bad. Your code should be universal, not browser specific.
Thanks very much for these, really great hacks.
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.
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.
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
@stk: Thanks or the article. Maybe I’ll add it to a future round up
Hi there,
Thanks for the Cross browser transparency hack. We’ve been trying to make popovers and this has been very helpful.
Cheers,
-messageforce
A great list, even if it is a bit naughty to call #3 “cross browser”.
weew.. so awesome… nice inpo dude..
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
good tips. Bookmarked. Thanks for sharing!!
jQuery + CSS = design top website
when jq+css it is absolute !
Nice! In my opinion CSS-Hacks are overrated, they are rather providing a potetial lack of upward-compability.
Wow it has a lot of good collection & they all are amazing tricks i am gonna to check it out & also sharing it with the friends!Thanks for it!
I really wish that highlighting was cross-browser, but at least it doesn’t hurt using it (to my knowledge).
Thanks for posting the tutorials Jean!
28 Trackbacks
[...] 10 astonishing CSS hacks and techniquescatswhocode.com [...]
[...] ArtÃculo completo [...]
[...] 10 astonishing CSS hacks and techniques. [...]
[...] http://www.catswhocode.com/blog/10-astonishing-css-hacks-and-techniques [...]
[...] 10 astonishing CSS hacks and techniques (tags: css html tutorials css:hacks) [...]
[...] 10 astonishing CSS hacks and techniques [...]
[...] 10 astonishing CSS hacks and techniques 10 cross browser css techniques to definitely enhance your designs. (tags: webdev tutorial list css) [...]
[...] 译自：10 astonishing CSS hacks and techniques [...]
[...] Themegestaltung, zur Inspiration würde ich zusätzlich noch empfehlen einen Blick auf den Beitrag 10 astonishing CSS hacks and techniques bei zu werfen. Wenn man sowieso schon beim Überarbeiten [...]
[...] saw this on Twitter via Designer Depot. It’s just a bunch of handy CSS tricks. I especially want to try [...]
[...] 10 astonishing CSS hacks and techniques [...]
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…
[...] 10 astonishing CSS hacks and techniques [...]
[...] 10 astonishing CSS hacks and techniques – [...]
[...] 10 Astonishing CSS Hacks And Techniques [...]
[...] æ¯å‘¨æŠ€æœ¯åˆ†äº«(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 [...]
[...] 10 astonishing CSS hacks and techniquesCover 10 cross-browser CSS techniques and hacks for creating better websites. [...]
[...] 10 astonishing CSS hacks and techniques Cover 10 cross-browser CSS techniques and hacks for creating better websites. [...]
[...] 10 astonishing CSS hacks and techniquesCover 10 cross-browser CSS techniques and hacks for creating better websites. [...]
[...] 10 astonishing CSS hacks and techniquesCover 10 cross-browser CSS techniques and hacks for creating better websites. [...]
[...] 10 astonishing CSS hacks and techniquesCover 10 cross-browser CSS techniques and hacks for creating better websites. [...]
[...] 10 astonishing CSS hacks and techniquesCover 10 cross-browser CSS techniques and hacks for creating better websites. [...]
[...] 10 astonishing CSS hacks and techniquesCover 10 cross-browser CSS techniques and hacks for creating better websites. [...]
[...] 10 astonishing CSS hacks and techniquesCover 10 cross-browser CSS techniques and hacks for creating better websites. [...]
[...] 10 astonishing CSS hacks and techniquesCover 10 cross-browser CSS techniques and hacks for creating better websites. [...]
[...] 10 astonishing CSS hacks and techniques [...]
[...] 10 cool cross-browser CSS hacks, my cat would never think of them. [...]
[...] 10 astonishing CSS hacks and techniques Cover 10 cross-browser CSS techniques and hacks for creating better websites. [...]