Hidden features of CSS

Question

I have definitely picked up some useful tips in the hidden features style questions concerning PHP and XHTML.

So here is one to cover CSS. While easy to pick up, it takes a little while to learn about everything, their default behaviors, properties etc

Here are some to start the ball

@charset "UTF-8"; /* set the character set. must be first line as Gumbo points out in comments */

.element {
        /* takes precedence over other stylings */
        display: block !important;

        /* mozilla .... rounded corners with no images */
        -moz-border-radius: 10px; 

        /* webkit equivalent */
        -webkit-border-radius: 10px 
}

These are not so much hidden, but their use is not often widespread. What tips, tricks, rare features have you discovered with CSS?

Yup. Double check all the other 'hidden-features', I'd wager that just about all of them are too. — George Stocker, Mar 09 '09 at 23:21
why not add border-radius: 10px; for browsers supporting CSS3? — Paul Dixon, Mar 09 '09 at 23:24
@Ólafur Waage: What's with the s/behaviour/behavior/ ? Behaviour is just as correct as behavior is, even more so since it is the Queens English. — X-Istence, Mar 09 '09 at 23:26
Wikified as requested... -moz because it's not supported by all browsers yet... I think they (W3C) recommend a vendor prefix? — alex, Mar 09 '09 at 23:39
Properties beginning with a - are vendor-specific, yes. Browsers are free to ignore them completely and still be standards-compliant. — strager, Mar 10 '09 at 00:15
What does an accepted answer mean on a 'hidden features' question? Is it the most hidden feature? — Oskar, Dec 03 '09 at 12:34
Removed accepted answer - don't know why I accepted it in the first place. Shouldn't affect Gumbo's rep as it is CW. — alex, Jun 21 '10 at 00:48
@dmckee @Roger Pate @Matthew Flaschen @Ether @Aiden Bell Why did you guys close this question? Do you think all *hidden features* questions are not *real questions*? — alex, Jul 10 '10 at 00:05
@alex: BTW, I found this by a web alert on my name, only the [first @name is recognized](http://meta.stackoverflow.com/questions/43019/how-do-comment-replies-work). Yes, the questions should not be deleted [for legacy purposes](http://meta.stackoverflow.com/questions/52456/new-hidden-features-questions-coincidence-copycat-or-sock-puppet/52459#52459), but new ones should definitely be discouraged and old ones should be closed (which helps in the discouragement, too). Closed questions can still be voted upon and have comments, just no new answers. — , Jul 12 '10 at 01:59
Also, Meta is a better place to discuss this than comments strewn throughout various random questions. See http://meta.stackexchange.com/questions/56669/should-hidden-features-of-x-be-removed-closed-locked in addition to the other I linked and I'm sure there's more. — , Jul 12 '10 at 02:19
@Roger Pate I was just thinking that because browsers are implementing new CSS stuff all the time, it should have been left open to add the new lesser known features as they are implemented. I wasn't aware of the meta discussion sorry. I deleted the other meta type comments on this question. — alex, Jul 12 '10 at 02:36
@alex: If you have questions about new browser features, please ask them. If you want to discuss new browser features, [SO isn't](http://stackoverflow.com/faq) a [discussion board](http://meta.stackexchange.com/questions/13198/). — , Jul 12 '10 at 02:41
@Roger Pate A link to the FAQ? Thanks... Anyway I'll add my close vote to this now after reading meta and to keep everyone happy. — alex, Jul 12 '10 at 02:53
@alex: The FAQ states SO "is not a discussion board", that's what I wanted to point out by linking. — , Jul 12 '10 at 04:28

score 58 · Answer 1 · answered Jan 26 '10 at 08:05

58

You can display the document’s title element:

head, title {
    display: block;
}

answered Jan 26 '10 at 08:05

Gumbo

643,351
109
780
844

1

that's unique. I thought none of the elements were renderable. – hndcrftd Oct 25 '10 at 00:44
Strangely, it works with – Danko Durbić Feb 18 '11 at 09:30
1

@Danko Durbić: Sure, they are also just elements in the DOM. – Gumbo Feb 18 '11 at 09:32
this is something I really like, `.el{background: red;position:absolute;top:0;left:0;right:0;bottom:0;}` – Val Jun 01 '11 at 08:54

score 39 · Answer 2 · answered Jun 05 '09 at 07:33

39

Apply multiple styles/classes to an element like this class="bold red GoldBg"

<html><head>
<style>
.bold {font-weight:bold}
.red {color:red}
.GoldBg {background-color:gold}
</style>
</head><body>
<p class="bold red GoldBg">Foo.Bar(red)</p>
</body></html>

answered Jun 05 '09 at 07:33

Binoj Antony

15,886
25
88
96

3

Why did I assume you can only do this with two classes..... – Omar Dec 29 '09 at 07:06
6

Also note the fine distinction between `.bold.red {}` and `.bold .red {}`... – Ates Goral Jul 29 '10 at 16:13
2

If multiple classes had conflicting properties (e.g. if `.red` and `.GoldBg` both specified the `color` property) then the CSS specificity rules apply; the order of classes in the `class="..."` attribute shouldn't matter. – ide Oct 18 '10 at 00:23
4

Be aware IE6 doesn't support multiple classes and will only apply the last one - GoldBg in this instance. – ajcw Nov 03 '10 at 16:10
to elaborate on what ide says, specificity works from more specific superseding less. so," #table_id td.special{}" supersedes "td.special {}" supersedes a generic ".special {}" – zanlok Nov 23 '10 at 10:46
3

but try to avoid naming classes like '.red' if you can. One day the client will want all the red text to be blue and now you've confused every developer that has to touch that code going forward. – DA. Mar 15 '11 at 06:29
1

@ide If the specificity is the same, the order of the classes does matter. Newer declarations (i.e. the ones that come later in the code) precede the older ones. – Halil Özgür Sep 18 '11 at 11:34

score 38 · Answer 3 · answered Jun 05 '09 at 07:47

38

I really like CSS sprites.

Rather than have 20 images for all your site buttons and logos (and therefore 20 http requests with the latency around each one) you just use one image, and position it each time so only the bit you want is visible.

It's difficult to post an example as you'd need to see the component image and the placement CSS - but I've blogged Google's use of it here: http://www.stevefenton.co.uk/Content/Blog/Date/200905/Blog/Google-Uses-Image-Sprites/

answered Jun 05 '09 at 07:47

Fenton

241,084
71
387
401

4

You can also use spriting for javascript controlled animations. Just cycle through the sprites on a setInterval etc. – Matthew Lock Dec 03 '09 at 06:14
1

Good suggestion from Matthew Lock - the bonus with that suggestion is that you just change the position of the image, rather than the source of the image - so pre-loading isn't necessary on your entire animation set. – Fenton Dec 03 '09 at 08:03
jQuery UI uses this in their themes for framework icons http://jqueryui.com/themeroller/ – serialk Dec 02 '10 at 05:30
Not so much a feature as a design pattern. – Yahel Mar 16 '11 at 04:23

score 25 · Answer 4 · answered Mar 09 '09 at 23:32

25

The fact that floating a parent element will cause it to expand to contain all of its floated children.

answered Mar 09 '09 at 23:32

Sophie Alpert

139,698
36
220
238

2

Knew this one but pretty handy. Also don't forget if that isn't an option, you can use the overflow property without resorting to ugly clearing divs. – alex Mar 09 '09 at 23:43
1

I don't know why everyone uses divs with a clear, i think br is a much more semantically relevant element to use, and I would consider a br with a clear on it to be less ugly then floating everything whether it needs it or not – Matt Briggs Jan 04 '10 at 20:12
1

@Matt Using `overflow: hidden` is even more semantic I believe - why introduce an element that is only there to *fix* a layout? – alex Mar 12 '11 at 03:32

score 23 · Answer 5 · edited May 23 '17 at 12:09

23

Maybe negative margins and absolute positioned elements in relative positioned elements.

See How would YOU do this with CSS? for examples.

edited May 23 '17 at 12:09

Community

1
1

answered Mar 09 '09 at 23:32

Gumbo

643,351
109
780
844

2

care to rather explain? also plz wiki it – hasen Mar 10 '09 at 00:09

score 23 · Answer 6 · edited Jun 01 '11 at 08:57

23

You can set a variable width for an absolutely positioned element by specifying both left and right properties. This gives you more control than simply setting width to a percentage.

For example:

#myElement {
    position: absolute;
    left: 5px;
    right: 10px;
}

An alternative Example

#myElement{ /* fill up the whole space :) */
   background: red;
   position:absolute;
   left: 0;
   right:0;
   top: 0;
   bottom: 0;
}

edited Jun 01 '11 at 08:57

Val

17,336
23
95
144

answered Jun 05 '09 at 08:15

Steve Harrison

121,227
16
87
72

2

I don't believe this works in IE, though. – MiffTheFox Jun 27 '09 at 22:44
3

I think this is supported all the way down to IE5.5 – Arve Systad Jun 03 '10 at 18:28
absolute positions are never preferred for flexible layouts. – Zain Shaikh Nov 04 '10 at 11:16
Doesn't really work as you'd expect; it's also buggy as hell. IE6 will leave behind artifacts for the content after it for example. – srcspider Jan 20 '11 at 14:15
You might need to put this in a `relative`ly positioned element. – Halil Özgür Mar 28 '11 at 14:40

score 21 · Answer 7 · edited Feb 08 '17 at 14:16

21

Take a look at Webkit CSS Transformations, e.g. -webkit-transform: rotate(9deg);

sample

edited Feb 08 '17 at 14:16

Community

1
1

answered Oct 24 '09 at 12:55

Niki Tonsky

1,327
11
19

How much support is there for this one accross major browsers? – Shawn Apr 30 '10 at 04:53
1

@Shawn: WebKit based browsers (Safari + Chrome), Firefox 3.1+ (I think), and Opera 10.5. So it's pretty widespread, except for IE--as always. :) – Sasha Chedygov Jun 21 '10 at 01:07
You can transform using the proprietary IE "filter:" thing like you used to do for transparent PNGs. Though the IE transform/rotation parameters require some basic trigonometry calculations. And standard obnoxious "filter:" bugs still apply. – Jon Adams Jun 26 '10 at 04:28
1

Ahahaha, just rotated this text block! So much fun. Going to write a greasemonkey script to mess with people. – George Mauer Apr 14 '11 at 18:02

score 15 · Answer 8 · answered Jul 17 '10 at 23:27

15

Last week I came across an amazingly useful CSS property I had never heard of:

text-rendering: optimizeLegibility;

Safari, Chrome and Firefox all understand this property, and when set enable advanced kerning and ligatures. Here's a great demo.

answered Jul 17 '10 at 23:27

kingjeffrey

14,894
6
42
47

2

it makes Chinese characters look horrible on some browsers/systems – hasen Oct 16 '10 at 22:20
1

This is an SVG property that those browsers happen to support on HTML elements. – Alex Barrett Jul 06 '11 at 11:53

score 15 · Answer 9 · answered Mar 10 '09 at 00:06

15

My ones are:

all properties of aural sheets like azimuth, pitch...
some properties of the print module like page-break-after: avoid;
counter-increment: section 1;
border-collapse: collapse;
background-color: transparent;
outline: 1px solid...

answered Mar 10 '09 at 00:06

Marco Luglio

3,503
1
21
27

VirtuosiMedia · Answer 10 · 2009-03-10T00:21:07.563

15

Not really a feature, but useful nonetheless: The child selector works in all browsers except IE6, allowing you to isolate IE6 without using hacks or conditional stylesheets or invalidating your code. Thus, the link in the following code will be red in IE6, blue in every other browser.

CSS

/*Red for IE6*/
.link {color:#F00;}
/*Blue for everything else*/
#content>.link {color:#00F;}

HTML

<div id="content">
    <a class="link" href="#">Link</a>
</div>

Here is a list of selectors (for CSS2) and a browser compatibility chart.

edited Mar 10 '09 at 00:21

answered Mar 10 '09 at 00:11

VirtuosiMedia

52,016
21
93
140

I'm pretty sure child selectors ARE a feature. =] – strager Mar 10 '09 at 00:17
4

They ARE a feature, but the fact that you can use them to isolate IE6 is more of a trick. – VirtuosiMedia Mar 10 '09 at 00:21

score 14 · Answer 11 · edited Apr 07 '11 at 19:33

Transparent PNG in IE6 This fixes PNG transparency in IE6. Set background to non and include the image in filter. No need for any javascript or htc.

.whatever {
   background: none; /* Hide the current background image so you can replace it with the filter*/
   width: 500px; /* Must specify width */
   height: 176px; /* Must specify height */
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='vehicles.png');
}

Sets page-breaking behavior after an element - Cross browser

table {
   page-break-after:always
}

You can use the properties always, avoid, auto, left, right, inherent. Read docs at http://www.w3schools.com/CSS/pr_print_pageba.asp

A way to number sections and sub-sections with "Section 1", "1.1", "1.2", etc - Cross browser

h2:before 
{
   counter-increment:subsection;
   content:counter(section) "." counter(subsection) " ";
}

http://www.w3schools.com/CSS/pr_gen_counter-increment.asp

Collapse Table borders into a single border or detached as in standard HTML - Cross browser

table
{
   border-collapse:collapse;
}

http://www.w3schools.com/css/pr_tab_border-collapse.asp

Remove selection Border or dotted line from button or input fields. Has other great uses - Cross browser

button{
   outline:0;
}

http://www.w3schools.com/CSS/pr_outline.asp

* html for 100% height in IE6

* html .move{
   height:100%;
}

Allow long words to break and wrap onto the next line - CSS3 Cross browser

.whatever {
   word-wrap:break-word;
}

http://www.w3schools.com/css3/css3_pr_word-wrap.asp

Shorthands

Before

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

After

font: 1em/1.5em bold italic serif;

Before

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

After

background: #fff url(image.gif) no-repeat top left;

Before

list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)

After

list-style: disc outside url(something.gif);

Before

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px

After

margin:2px 1px 3px 4px; /*also works for padding*/
margin:0; /*You can also do this for all 0 borders*/
margin:2px 3px 5px; /*  you can do this for top 2px, left/right 3px, bottom 5px and ;

`outline: 0;` Don't do it! http://outlinenone.com/ – OrganicPanda Nov 15 '11 at 16:01 — OrganicPanda, Nov 15 '11 at 16:01
whenever I see w3schools links I cringe – Zach Lysobey Feb 24 '12 at 00:40 — Zach Lysobey, Feb 24 '12 at 00:40

score 9 · Answer 12 · answered Jun 26 '10 at 03:16

9

You can create scrolling areas without resorting to frames by using CSS's overflow property. Example:

div.foo {
    border:   1px solid;
    width:    300px;
    height:   300px;
    overflow: auto;
}

overflow: auto means if the content can't fit within the div, horizontal and/or vertical scroll bars will appear as needed.

overflow: scroll means both scroll bars will always be present. If you only want one scroll bar to always be present, use overflow-x or overflow-y (which are supported by modern browsers and IE6).

Some of you may be thinking "duuuh", but I was surprised to learn that scrolling areas can be created without frames.

answered Jun 26 '10 at 03:16

Joey Adams

41,996
18
86
115

2

Beware, I discovered recently that the iPad (and presumably iPhones and iPods) do not support this, by which I mean it doesn't display the scrollbar and cuts off your content. – ajcw Feb 27 '11 at 17:39
4

iOS, or, more precisely, mobile Safari support this just fine. What they don't do, though, is show scroll bars. You have to two-finger scroll. So, not always intuitive. Not sure why apple made that decision. – DA. Mar 15 '11 at 06:32
@John iOS versions before 5 make you use two fingers to scroll overflow:scroll content, but you can use [iScroll 4](http://cubiq.org/iscroll-4) to fix this. iOS 5, however, doesn't need that script and does it all natively. Ad@m – kirb Aug 30 '11 at 11:21

score 8 · Answer 13 · answered Jan 30 '11 at 14:18

8

The :before and :after pseudo-elements

The following rule causes the string "Chapter: " to be generated before each H1 element:

H1:before { 
  content: "Chapter: ";
  display: inline;
}

For more, http://www.w3.org/TR/CSS2/generate.html

answered Jan 30 '11 at 14:18

Nazmul

7,078
12
51
63

score 7 · Answer 14 · answered Nov 01 '10 at 18:17

7

Inline @media assignments:

/* Styles.css */
.foo { ... bar ... }
...
@media print{
    .ads{display:none}
}

So that you can get rid of another HTTP request.

answered Nov 01 '10 at 18:17

Halil Özgür

15,731
6
49
56

score 7 · Answer 15 · answered Mar 07 '11 at 22:11

7

We can display the style tag as a block element and edit CSS dynamically using the HTML5 contenteditable attribute. Demo Here.

   <body>
       <style contenteditable>
           style {
            display: block;
           }
           body {
            background: #FEA;
           }

       </style>
   </body>

Credits: CSS-Tricks

answered Mar 07 '11 at 22:11

Samuel Katz

24,066
8
71
57

It's worth noting that this does not work in IE -- see: http://msdn.microsoft.com/en-us/library/ms537837(v=vs.85).aspx – Sean Vieira Mar 07 '11 at 22:38
I wouldn't depend on it working anywhere. It's invalid HTML put to a particularly hacky use. – Chuck Mar 07 '11 at 23:54

score 7 · Answer 16 · edited May 23 '17 at 12:17

7

Not so much hidden features, but a question featuring CSS tips which every beginning developer should know about

edited May 23 '17 at 12:17

Community

1
1

answered Mar 09 '09 at 23:28

Paul Dixon

295,876
54
310
348

hasen · Answer 17 · 2009-03-10T00:07:35.770

7

inline blocks (alternative to floating divs):

.inline_block
{
    display:-moz-inline-box;
    display:inline-block;
}

Don't apply this class to a div! it won't work! apply it to a span (or an inline element)

<span class="inline_block">
</span>

edited Mar 10 '09 at 00:07

answered Mar 09 '09 at 23:47

hasen

161,647
65
194
231

IE6 only supports with inline elements, am I correct? – alex Mar 09 '09 at 23:51
not sure which browser supports or doesn't support divs, but that's why I said it doesn't work on divs! – hasen Mar 10 '09 at 00:06
Why would divs not be supported? A div is a span with display: block (but may have extra styling by a browser or author stylesheet). – strager Mar 10 '09 at 00:17
don't you know how browsers are nice to us? it doesn't work on an element that has block display, online inline elements. – hasen Mar 10 '09 at 01:59
@strager while you are correct, don't underestimate IE's implementation (or lack) of standards – alex Jun 22 '09 at 22:56
.iblock { display: -moz-inline-stack; display:inline-block; zoom:1; *display:inline; /* Alignment Fix */ vertical-align:top; } – Andres Oct 15 '10 at 22:02

Nazmul · Answer 18 · 2011-12-16T03:56:42.207

6

I have never thought that using css 'border' property I can make different shaped triangle. Here is the link to go,

(edit) The following link does not work anymore. http://www.dinnermint.org/blog/css/creating-triangles-in-css/

From now, you can try the following, http://jonrohan.me/guide/css/creating-triangles-in-css/

edited Dec 16 '11 at 03:56

answered Dec 08 '10 at 07:00

Nazmul

7,078
12
51
63

This link is no longer valid. – Nathan Osman Dec 16 '11 at 03:22
@GeorgeEdison: You are right. I will try to find alternative source to show the example. – Nazmul Dec 16 '11 at 03:54

score 6 · Answer 19 · answered Mar 09 '09 at 23:35

6

Not really "hidden", but understanding the box model and positioning model will help tremendously.

Like, knowing that a position: absolute element is positioned relative to its first parent that is styled with position: relative.

answered Mar 09 '09 at 23:35

Sophie Alpert

139,698
36
220
238

5

No, it's positioned relative to the closest parent with *any* 'position:' other than the default, 'static' – Gareth Mar 09 '09 at 23:39
@Gareth - almost, "fixed" also doesn't count – annakata Jun 05 '09 at 07:49
1

@annakata: Are you sure? I just tried it quickly, and the absolute div was positioned inside it's parent - a fixed div. I added another absolute div with with the same specs but with no parent (well, body would be its default parent), and it was positioned differently than the one inside the fixed - i.e. it was positioned at the bottom of the page. So I assume absolute-inside-fixed works. – AgentConundrum Aug 10 '10 at 12:00

alex · Answer 20 · 2011-01-30T14:19:53.883

6

Currently only for WebKit but quite interesting: CSS Animations

edited Jan 30 '11 at 14:19

answered Mar 09 '09 at 23:50

alex

479,566
201
878
984

sumanchalki · Answer 21 · 2010-05-14T07:50:27.907

5

Word wrapping can be done easily using css, without any help of server-side technology.

word-wrap: break-word;

edited May 14 '10 at 07:50

answered Apr 14 '10 at 11:26

sumanchalki

1,457
17
21

score 3 · Answer 22 · edited Jun 21 '10 at 00:50

3

Cross browser inline-block works on block and inline elements using the combined declarations:

.column { 
-moz-inline-box; -moz-box-orient:vertical; display:inline-block; vertical-align:top; 
}

for standards browsers including Firefox 2, and:

.ie_lte7 .column { display:inline; }

edited Jun 21 '10 at 00:50

alex

479,566
201
878
984

answered Jun 30 '09 at 16:40

score 3 · Answer 23 · answered Dec 29 '09 at 07:01

3

Cross-browser (IE6+, FF, Safari) float alternative:

.inline-block {
    display: inline-block;
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    vertical-align: top;
    zoom: 1;
    *display: inline; }

answered Dec 29 '09 at 07:01

eozzy

66,048
104
272
428

This only works on elements in IE6/7 that are inline by default right? – alex Dec 29 '09 at 23:23
Works on DIV, which is a block element. – eozzy Dec 30 '09 at 03:19

score 3 · Answer 24 · answered Mar 11 '09 at 20:52

3

Another IE6 selector

* html .something
{
  color:red;
}

Fixing random IE6 rendering bugs - apply zoom:1 which will trigger layout.

answered Mar 11 '09 at 20:52

Atanas Korchev

30,562
8
59
93

Note zoom will not validate... if this matters to you then try height: 1% or similar to trigger hasLayout – alex Mar 11 '09 at 23:13

score 2 · Answer 25 · answered Jan 04 '10 at 20:12

2

I have no Idea whether this is a hidden feature, but I just wowed seeing this: http://www.romancortes.com/blog/css-3d-meninas/

answered Jan 04 '10 at 20:12

zedoo

10,562
12
44
55

score 1 · Answer 26 · answered Jul 09 '09 at 12:43

1

.class {
/* red for chrome, ff, safari, opera */
background-color: red;
/* green for IE6 */
.background-color: green;
/* blue for IE7+ */
_background-color: blue;
}

will render your <whatever> background different in those browser categories

answered Jul 09 '09 at 12:43

TheBrain

5,528
2
25
26

1

Browser hacks aern't features? Oh well, still useful! – alex Jul 09 '09 at 21:58
5

It's best practice to add separate stylesheets for IE6 and IE7 using Conditional Comments http://www.quirksmode.org/css/condcom.html instead of relying on rendering engine bugs. – Tom Oct 24 '09 at 12:56
2

This is a really BAD practice. Listen to @Tom ;) – gregers Oct 14 '10 at 11:58
2

Browser hacks aren't features. They are bugs. – DA. Mar 15 '11 at 06:35
Even better, use Paul Irish's sweet method: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither – Web_Designer Dec 17 '11 at 08:57

score 0 · Answer 27 · edited Jun 21 '10 at 00:51

0

The border-radius stuff is part of the CSS3 specification. As CSS3 is still not completely finished the more progressive browsers in the meantime implement parts of it with their own properties (-moz, -webkit). So we can already enjoy rounded corners, cleanly coded in pure css.

Unfortunately the other big player in the browser market still shows no sign of implementing css3 features.

edited Jun 21 '10 at 00:51

alex

479,566
201
878
984

answered Mar 09 '09 at 23:41

Kees de Kooter

7,078
5
38
45

Hidden features of CSS

27 Answers27

Shorthands

Linked