ansaurus

Question

Answer 1

+1 A:

I know this isn't a CSS feature, but it sure can make these easier to use and live with if you're using Visual Studio. How to create custom CSS intellisense schema in Visual Studio 2005 and 2008.

overslacked 2009-03-09 23:26:50

Answer 2

+6 A:

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

Paul Dixon 2009-03-09 23:28:25

Answer 3

+14 A:

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

Ben Alpert 2009-03-09 23:32:29

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 2009-03-09 23:43:06

I would vote this up but it should be a community wiki answer

John Sheehan 2009-03-11 20:55:19

Sorry. Should have done it from the start.

Ben Alpert 2009-03-11 22:26:55

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 2010-01-04 20:12:04

Answer 4

+19 A:

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

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

Gumbo 2009-03-09 23:32:39

care to rather explain? also plz wiki it

hasen j 2009-03-10 00:09:17

Answer 5

+4 A:

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.

Ben Alpert 2009-03-09 23:35:43

No, it's positioned relative to the closest parent with *any* 'position:' other than the default, 'static'

Gareth 2009-03-09 23:39:58

@Gareth - almost, "fixed" also doesn't count

annakata 2009-06-05 07:49:30

@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 2010-08-10 12:00:39

Answer 6

A:

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.

Kees de Kooter 2009-03-09 23:41:25

You could probably add that last paragraph to any Stack Overflow answer. But it wouldn't be very helpful would it?

alex 2009-03-09 23:48:24

You are absolutely right Alex. I deleted the last paragraph.

Kees de Kooter 2010-01-04 20:09:10

Answer 7

+4 A:

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>

hasen j 2009-03-09 23:47:48

IE6 only supports with inline elements, am I correct?

alex 2009-03-09 23:51:15

not sure which browser supports or doesn't support divs, but that's why I said it doesn't work on divs!

hasen j 2009-03-10 00:06:52

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 2009-03-10 00:17:22

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 j 2009-03-10 01:59:36

@strager while you are correct, don't underestimate IE's implementation (or lack) of standards

alex 2009-06-22 22:56:24

.iblock { display: -moz-inline-stack; display:inline-block; zoom:1; *display:inline; /* Alignment Fix */ vertical-align:top;}

Andres 2010-10-15 22:02:09

Answer 8

+6 A:

Currently only for Safari 3 but quite interesting: CSS Animations

alex 2009-03-09 23:50:52

You probably meant webkit.

Tchalvak 2010-06-25 16:57:39

Answer 9

+9 A:

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...

facildelembrar 2009-03-10 00:06:59

Answer 10

+6 A:

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.

VirtuosiMedia 2009-03-10 00:11:49

I'm pretty sure child selectors ARE a feature. =]

strager 2009-03-10 00:17:56

They ARE a feature, but the fact that you can use them to isolate IE6 is more of a trick.

VirtuosiMedia 2009-03-10 00:21:54

Answer 11

+2 A:

Another IE6 selector

* html .something
{
  color:red;
}

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

korchev 2009-03-11 20:52:11

Note zoom will not validate... if this matters to you then try height: 1% or similar to trigger hasLayout

alex 2009-03-11 23:13:19

Answer 12

+24 A:

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>

Binoj Antony 2009-06-05 07:33:36

This is a great answer - it's surprising how many people don't know this.

Sohnee 2009-06-05 07:44:23

Why did I assume you can only do this with two classes.....

Baddie 2009-12-29 07:06:37

Also note the fine distinction between `.bold.red {}` and `.bold .red {}`...

Ates Goral 2010-07-29 16:13:39

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 2010-10-18 00:23:34

Answer 13

+19 A:

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/

Sohnee 2009-06-05 07:47:50

You can also use spriting for javascript controlled animations. Just cycle through the sprites on a setInterval etc.

Matthew Lock 2009-12-03 06:14:38

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.

Sohnee 2009-12-03 08:03:15

You can see an example here http://sstatic.net/so/img/sprites.png

alex 2010-07-10 00:12:18

Answer 14

+9 A:

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;
}

Steve Harrison 2009-06-05 08:15:24

I don't believe this works in IE, though.

MiffTheFox 2009-06-27 22:44:38

Surely it works in IE8?

Bobby Jack 2009-07-09 15:44:03

I think this is supported all the way down to IE5.5

Arve Systad 2010-06-03 18:28:23

Answer 15

A:

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; }

2009-06-30 16:40:34

Answer 16

A:

.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

TheBrain 2009-07-09 12:43:49

Browser hacks aern't features? Oh well, still useful!

alex 2009-07-09 21:58:51

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 2009-10-24 12:56:28

This is a really BAD practice. Listen to @Tom ;)

gregers 2010-10-14 11:58:16

Answer 17

+9 A:

Nikita Prokopov 2009-10-24 12:55:52

This is the coolest one yet! +1

alex 2010-01-14 03:25:17

How much support is there for this one accross major browsers?

Shawn 2010-04-30 04:53:56

@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. :)

musicfreak 2010-06-21 01:07:56

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.

Mufasa 2010-06-26 04:28:16

Answer 18

+1 A:

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; }

Nimbuz 2009-12-29 07:01:50

This only works on elements in IE6/7 that are inline by default right?

alex 2009-12-29 23:23:52

Works on DIV, which is a block element.

Nimbuz 2009-12-30 03:19:04

Answer 19

+1 A:

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

zedoo 2010-01-04 20:12:55

Answer 20

+15 A:

You can display the document’s title element:

head, title {
    display: block;
}

Gumbo 2010-01-26 08:05:31

Wow, nice, and also rather strange.

Tchalvak 2010-06-25 16:59:20

+1 for probably not useful but still interesting

Brendan Long 2010-07-03 18:51:05

that's unique. I thought none of the <head> elements were renderable.

Raine 2010-10-25 00:44:45

Answer 21

+1 A:

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

word-wrap: break-word;

sumanchalki 2010-04-14 11:26:11

Answer 22

+4 A:

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.

Joey Adams 2010-06-26 03:16:07

Answer 23

+3 A:

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.

kingjeffrey 2010-07-17 23:27:15

it makes Chinese characters look horrible on some browsers/systems

hasen j 2010-10-16 22:20:58

ansaurus

tags:

views:

answers:

Hidden features of CSS

related questions