3 CSS properties you might not have heard of

CSS3

There are many CSS properties that you use on auto-pilot, properties you don’t think about because they are like a second nature in order to get the styling done according to the requirements. However, there are still many properties that you might not have heard off. The main reason of this is probably since they are not always fully supported by all browsers. I’d like to share 3 properties with you that I’ve recently used.

Writing mode

We are mostly used to reading text from left to right, however not all text is suppose to be read in that direction. In other languages the direction could also be from right to left or top to bottom.

/* Horizontally from left to right, vertically from top to bottom */
.example1 {
    writing-mode: horizontal-tb;
}

/* Vertically from top to bottom, horizontally from right to left */
.example2 {
    writing-mode: vertical-rl;
}

/* Vertically from top to bottom, horizontally from left to right */
.example3 {
    writing-mode: vertical-lr;
}

Check browser compatibility here

Resize

This gives you the option to resize an element by dragging the corners of it.

/* Can be resized vertically and horizontally */
.example1 {
    resize: both;
}

/* Can only be resized vertically */
.example2 {
    resize: vertical;
}

Check browser compatibility here

Pointer-events

This gives you the option to add a mouse event (e.g. clicking, dragging, hovering) to graphics (mainly SVG’s).

/* Element will not react to mouse events */
.example1 {
    pointer-events: none;
}

/* Element will react when the fill property is set to a value */
.example2 {
    pointer-events: painted;
}

Check browser compatibility here

Share your thoughts

Leave a Reply