Some hidden CSS3 properties you should know p1

Tram Ho

CSS3 has made web design more interesting with the introduction of new properties. While you may know about common ones, such as box shadows, contour radii and transformations, there are many properties that you may not have heard or tried, it will be fun to know about the its existence.

W3C is constantly working on new CSS properties to make the web much better for designers, developers and users. Meanwhile, let’s take a look at these 10 attributes you may not know but really should try.

1. Tab-size

Most code editors are equipped with a Tab Size control that allows developers to specify the indent width to be implemented by the Tab key. Just recently, we were also able to customize the indent of the code embedded on web pages.

Note that each browser may have its own interpretation of how long the tab width should be. So we can expect to see some differences between different browsers. In terms of browser support, the tab-property property works in Chrome, Opera, Firefox and Safari according to CanIUse.

2. Text-rendering

The text-rendering property will tell browsers how they should make the text in the web page. Text will be optimized for performance, legibility, or accuracy, ultimately determining the quality of the text. Take a closer look at the brightness of text in the following screenshot to compare between text and optimizedLegibility ‘normal’ text.

3. Font-stretch

Some fonts provide additional faces in addition to the regular, bold and italic letters. Helvetica Neue or Myriad Pro is an example that comes with faces like ‘Condense’, ‘Super concentrated’ and ‘Semi-condensed’. This is where a new property called font-stretch is introduced; It allows us to apply these faces. We can use font-stretch in combination with font properties, for example, font-style. Here is an example:

The font-stretch property currently only works in Firefox and Internet Explorer 9 (and above).

4. Text-overflow

The text-overflow specified property presents content that is overflow or truncated by its container. The default value is set to clip, which simply hides the truncated text. Alternately, you can set it to ellipses describe the truncated text or content with horizontal ellipses, as follows.

In case you’re wondering, the horizontal ellipsis that is the three dots at the end usually denotes missed content.

5. Writing-mode

Not all languages ​​are written from left to right. Instead, some languages ​​are written from top to bottom like Japanese or right to left like Arabic and Hebrew. To accommodate these languages, a new attribute called writing-mode was introduced to allow developers to change the way content is written through CSS. This code, for example, navigates content flow from left to right (regardless of language).


To change the content stream, move from top to bottom, set the attribute with vertical-lr value:
Share the news now

Source : Viblo