Tipue London
Home

Products

Blog

Support

About
Close

Some CSS you may not know

A few CSS things. Some you probably know, and some you probably don't

Some CSS you may not know

April 27, 2015
The aim of this article is to share some CSS you may not know. Some you will know, of course, but there's probably something here you don't.

Box-sizing

When the box-sizing property, introduced in CSS3, has a value of border-box, padding and border values are included in the element's width and height.
Works in Chrome 31+, Microsoft Edge, IE8+, Firefox 31+, Safari 7+, Opera 27+, iOS Safari 7.1+ and Android Browser 4.1+.

z-index and position

If an element doesn't have a position property, such as static, absolute, relative or fixed, any z-index value is ignored.

Brick an element

You can effectively disable an element using the pointer-events property with a value of none. Click events are no longer triggered, even in jQuery or JavaScript.
Works in Chrome 31+, Microsoft Edge, IE11+, Firefox 31+, Safari 7+, Opera 27+, iOS Safari 7.1+ and Android Browser 4.1+.
Advert

Wrap a long link

Prevent a link from breaking out of its parent element.

Detect a Retina Display with a media query

You can detect a Retina display with the following media query.

Filters

The filter property currently has wide support outside of IE, but is included in Microsoft Edge 13+. It could be a big thing in the next couple of years.
Works in Chrome 31+, Microsoft Edge 13+, Firefox 35+, Safari 7+, Opera 27+, iOS Safari 7.1+ and Android Browser 4.4+.
Advert

Shorten text with an ellipsis

You can shorten overlong text in an element with an ellipsis.

Make an empty element obey width

Sometimes you need an empty element to respect its width property. This will do it.

@supports

The @supports query works in a similar way to @media, and indicates if a browser supports a given CSS property. There's no IE support. One to watch.
Works in Chrome 31+, Microsoft Edge, Firefox 31+, Safari 9+, Opera 27+ and Android Browser 4.4+.
Advert
© 2017, Tipue. Made in London.
Privacy  T&Cs