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
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
Works in Chrome 31+, Microsoft Edge, IE11+, Firefox 31+, Safari 7+, Opera 27+, iOS Safari 7.1+ and Android Browser 4.1+.
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.
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+.
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.
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+.
© 2016, Tipue. Made in London.