Hidden features of CSS

CssHidden Features

Css Problem Overview

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?

Css Solutions

Solution 1 - Css

You can display the document’s title element:

head, title {
    display: block;
}

Solution 2 - Css

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>

Solution 3 - Css

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/

Solution 4 - Css

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

Solution 5 - Css

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

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

Solution 6 - Css

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

Solution 7 - Css

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

sample

Solution 8 - Css

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

Solution 9 - Css

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.

Solution 10 - Css

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.

Solution 11 - Css

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 ;

Solution 12 - Css

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.

Solution 13 - Css

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

Solution 14 - Css

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

Solution 15 - Css

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>

Solution 16 - Css

Inline @media assignments:

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

So that you can get rid of another HTTP request.

Solution 17 - Css

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

Solution 18 - Css

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.

Solution 19 - Css

Currently only for WebKit but quite interesting: CSS Animations

Solution 20 - Css

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/

Solution 21 - Css

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

word-wrap: break-word;

Solution 22 - Css

Another IE6 selector

* html .something
{
  color:red;
}

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

Solution 23 - Css

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

Solution 24 - Css

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

Solution 25 - Css

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

Solution 26 - Css

.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

Solution 27 - Css

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.

Categories
Recommended Css Solutions
Recommended Hidden Features Solutions

Previous Solution:

Compilers and argument order of evaluation in C++

C++Operator Precedence

Next Solution:

LINQ: Dot Notation vs Query Expression

Linq.Net 3.5Lambda

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionalexView Question on Stackoverflow
Solution 1 - CssGumboView Answer on Stackoverflow
Solution 2 - CssBinoj AntonyView Answer on Stackoverflow
Solution 3 - CssFentonView Answer on Stackoverflow
Solution 4 - CssSophie AlpertView Answer on Stackoverflow
Solution 5 - CssGumboView Answer on Stackoverflow
Solution 6 - CssSteve HarrisonView Answer on Stackoverflow
Solution 7 - CssNiki TonskyView Answer on Stackoverflow
Solution 8 - CssMarco LuglioView Answer on Stackoverflow
Solution 9 - CssVirtuosiMediaView Answer on Stackoverflow
Solution 10 - CsskingjeffreyView Answer on Stackoverflow
Solution 11 - CssHusseinView Answer on Stackoverflow
Solution 12 - CssJoey AdamsView Answer on Stackoverflow
Solution 13 - CssNazmulView Answer on Stackoverflow
Solution 14 - CssPaul DixonView Answer on Stackoverflow
Solution 15 - CsshasenView Answer on Stackoverflow
Solution 16 - CssHalil ÖzgürView Answer on Stackoverflow
Solution 17 - CssSalman von AbbasView Answer on Stackoverflow
Solution 18 - CssSophie AlpertView Answer on Stackoverflow
Solution 19 - CssalexView Answer on Stackoverflow
Solution 20 - CssNazmulView Answer on Stackoverflow
Solution 21 - CsssumanchalkiView Answer on Stackoverflow
Solution 22 - CssAtanas KorchevView Answer on Stackoverflow
Solution 23 - CssPaul SweatteView Answer on Stackoverflow
Solution 24 - CsseozzyView Answer on Stackoverflow
Solution 25 - CsszedooView Answer on Stackoverflow
Solution 26 - CssTheBrainView Answer on Stackoverflow
Solution 27 - CssKees de KooterView Answer on Stackoverflow