Use the power of CSS to manipulate styles in specific browsers

By Fred Rocha (2017/02/28)

Compatible Browsers

Occasionally the layout of a WEB page needs to receive specific changes according to the user's browser.

Apply custom styles using the following CSS selectors:

Only (Firefox *) Browser

Firefox

_:-moz-tree-row(hover), (tagClassOrId) {   css declarations; }

Only MS (IE ≥ 10) Browser

MS IE

_:-ms-input-placeholder, :root (tagClassOrId) {  css declarations; }

Only MS (Edge 12+) Browser

MS Edge

_:-ms-lang(x), _:-webkit-full-screen, (tagClassOrId) {  css declarations; }

Only MS (Edge 12+ | IE ≥ 10) Browsers

MS Browsers

_:-ms-lang(x), _:-webkit-full-screen, (tagClassOrId) {  css declarations; }

_:-ms-input-placeholder, :root (tagClassOrId) {  css declarations; }

Only (Safari *) Browser

Safari

::i-block-chrome _::-webkit-inner-spin-button, :root (tagClassOrId) {  css declarations; }

_::-webkit-:not(:root:root), (tagClassOrId) {  css declarations; }

Only (Chrome 35+ | Opera 41+) Browsers

Chrome, Opera

_::content, _:future, (tagClassOrId):not(*:root) {  css declarations; }

Only Webkit Browsers (Chrome * | Opera ≥ 14 | Safari * | MS Edge 12+)

Chrome, Opera, Safari, MS Edge (Webkit Browsers)

(tagClassOrId):not(*:root) {  css declarations; }

_:-ms-lang(x), _:-webkit-full-screen, (tagClassOrId) {  css declarations; }

Liked? Have a good time!

codepen.io | github.com


516 0 0