10 Hidden CSS3 Properties You Should Know

CSS3 have done conceptualizing web some-more sparkling with a introduction of new properties. While we competence know of a renouned ones, such as a box-shadow, border-radius, and transform, there are copiousness some-more properties that we might not have listened of or tried, though would be blissful to know of a existence.

W3C is constantly operative on new CSS properties to make a web most improved for designers, developers and users. In a meantime, let’s take a demeanour during these 10 properties we might not know of though should unequivocally check out.

Recommended Reading: Beginner’s Guide to All Things CSS3

1. Tab Size

Most formula editors are versed with Tab Size control that allows developers to mention a formula gash breadth done with a Tab key. It was customarily recently that we were also means to customize a gash of a formula embedded on webpages.

pre 
	tab-size: 2;

Note that any browser might have their possess interpretation of how prolonged a tab-width section should be. So, we might design to see some discrepancies among opposite browsers. In terms of browser support, a tab-size skill works in Chrome, Opera, Firefox, and Safari according to CanIUse.

2. Text Rendering

The text-rendering skill will tell browsers how they should describe a calm within webpages. The calm will be optimized for performance, legibility, or precision, that will eventually establish a calm quality. Take a closer demeanour during a kerning of a calm in a following screenshot for a comparison between ‘normal’ calm and optimizedLegibility text:

Comparison pleasantness by AestheticallyLoyal

For some-more recommendation on good typography, check out Practical Typography.

3. Font Stretch

Some fonts yield additional faces aside from a unchanging Normal, Bold and Italic. Helvetica Neue or Myriad Pro as an instance comes with faces such ‘Condensed’, ‘Ultra-condensed’, and ‘Semi-condensed’. This is where a new skill called font-stretch is introduced; it allows us to request these faces.

We might use font-stretch in and with rise skill like for instance,font-style. Here is an example:

h1 
	font-style: bold;
	font-stretch: ;

The font-stretch skill now customarily works in Firefox and Internet Explorer 9 (and above).

4. Text Overflow

The text-overflow skill specifies display of calm that is superfluous or truncated by a container. The default value is set to clip that simply hides a truncated text. Alternately, we can set it to ellipsis to etch a truncated calm or calm with plane ellipsis, as follows.

.content-box 
	text-overflow

In box we are wondering, plane ellipsis is a 3 dots during a finish that customarily indicates wanting content.

5. Writing Mode

Not each denunciation is created from a left to right direction. A few languages are instead created from tip to bottom like Japanese or right to left like Arabic and Hebrew.

Image pleasantness by AimiriFont

To accommodate these languages, a new skill named writing-mode is introduced to let developers change a calm essay instruction by CSS. This formula snippet, as an example, leads a calm upsurge from a left to a right (regardless of a language).

p 
	writing-mode: rl-tb;

To change a upsurge of content, relocating from tip to bottom, set a skill with a vertical-lr value:

p 
	writing-mode: vertical-lr;

6. Pointer Events

The pointer-events skill allows us to control component function underneath pointer events like dragging, hovering and clicking. Using this, a influenced integrate will do zero when it is clicked; a integrate will be totally disabled, and will not even approach users to a residence specified in a href attribute.

a 
	pointer-events: none;

Due to some vicious issues however a pointer-events skill is put on reason until a subsequent CSS revision, CSS4.

7. Image Orientation

In an picture editor such as Photoshop, we can change a picture course by rotating or flipping a image. Now CSS3 allows we to do a same to a images on webpages by a new skill called image-orientation. Here is an instance on how we can flip an picture horizontally regulating this property.

img 
	image-orientation: flip;	

You can also keep a strange picture course by naming a skill value to from-image, like so.

img 
	image-orientation: from-image;

8. Image Rendering

Similar to a text-rendering property, image-rendering defines a picture peculiarity on webpages, in sold when a picture is forcefully resized. With a appearance of this skill comes a series of new values, and browsers have their possess specifications in this matter. The crisp-edges value, for example, that preserves contrariety and prevents becloud edges of images, is now translated as -webkit-optimize-contrast in Webkit browsers and nearest-neighbor in Internet Explorer.

img 
	image-rendering: crisp-edges;
	image-rendering: -webkit-optimize-contrast;/* Webkit */
	-ms-interpolation-mode: nearest-neighbor; /* IE */

It’s an initial technology, so we will expected see a few changes in a implementation.

9. Columns

The columns skill allows developers to arrange web calm into columns with ease. We separate a calm into dual columns like this:

.content 
	columns: 2;

In a browsers that support this skill – like Chrome and Safari – we will see a calm organised like so.

Coupled with CSS Shape and a bit of creativity, we can have a liquid and some-more interesting calm blueprint most like what we see in a conform repository on your websites.

10. Flex

The flex skill aims to make building manageable grid some-more seamless while elucidate a integrate of issues in a stream mainstream process for web blueprint arrangement – a float property.

On tip of that, by regulating a flex property, a web blueprint will take a full tallness of a container, that was utterly unwieldy to understanding with formerly (take a demeanour during a prior post on this matter: Equal Column Height With CSS).

Now, presumption we would like to build a web blueprint that comprises of 3 columns, we can have a markup organised this way.

div id="container"
	div class="col"Column 1/div
	div class="col"Column 2/div
	div class="col"Column 3/div
/div

Then, build them into columns regulating a flex property, like so.

#container 
	width: 600px;
	height: 300px;
	display: flex;

#container .col 
	flex: auto;

With additions of musical styles like rise and credentials color, we will get a following result.

10 Hidden CSS3 Properties You Should Know