20 Lesser-Known CSS Features You Probably Didn’t Know About

20 Lesser-Known CSS Features You Probably Didn’t Know About

20 Lesser-Known CSS Features You Probably Didn't Know

Here are the top 20 hidden/lesser-known CSS tricks according to StackOverflow users.

1.

You can display the document’s title element:

head, title {
    display: block;
}

2.

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>

3.

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

4.

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.

5.

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

6.

My ones are:

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

7.

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.

8.

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

text-rendering: optimizeLegibility;

9.

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.

10.

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.

11.

The :before and :after pseudo-elements

12.

inline blocks (alternative to floating divs):

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

13.

Inline @media assignments:

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

14.

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

15.

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

16.

Another IE6 selector

* html .something
{
  color:red;
}

Fixing random IE6 rendering bu

17.

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

18.

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

19.

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

20.

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.

front-end-development web-development css stackoverflow lesser-known lesser-known css

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Hire Front-end Developer | Dedicated Front-end Programmers In India

Hire Front-end web developers and programmers in India from ValueCoders for your custom offshore Front-end application development projects. Hire a Front-end developer from ValueCoders and get interactive Front-end web designs. 16+ years exp. , 100% money-back guarantee, 450+ Staff. Contact Us Today!

Front End Development Best Practices To Follow

![This is image title](https://solwincdn-79e1.kxcdn.com/wp-content/uploads/2021/06/Front-End-Development-Best-Practices.png "This is image title") As someone from a non-tech background, you might not understand the complexities of front-end...

Hire Front-end Developer | Dedicated Front-end Programmers In India

Hire Front-end web developers and programmers in India from ValueCoders for your custom offshore Front-end application development projects. Hire Front-end developer from ValueCoders and get interactive Front-end web designs. 16+ years exp. , 100% money back guarantee, 450+ Staff . Contact Us Today!

Top 10 Front End Development Companies In 2021

Looking for a trustworthy front end development company? Read this blog to know the Top 10 Front End Development Companies in 2021.

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...