CSS Hacks For Every Web Developer
January 27th, 2020

CSS Browser-Specific Hacks

What is this?

Browser hacks is an extensive list of browser specific CSS hacks from all over the inter-webs. CSS hacks are needed in order to solve problems caused by different browsers rendering.

How to?

Pick the hack you want. Copy it into your stylesheet. Add the style you want between the braces. Enjoy the new styles for the browser you targeted!

Reminder!

Please keep in mind using a hack is not always the perfect solution. It can be useful to fix some weird browser specific bug, but in most cases you should fix your CSS.

Firefox – Any Firefox browser hack
@-moz-document url-prefix() {

.selector { Property: Value; }

}
Media Query Hacks
@media all and (min--moz-device-pixel-ratio:0) and (min-resolution: 1280px) {
.selector { Property: Value; }
}
Google Chrome and Safari CSS hack
@media screen and (-webkit-min-device-pixel-ratio:0) {
.selector { Property: Value; }
}

Note :- Safari and Google Chrome are mainly the same, but sometimes behave differently, especially in forms, and fonts rendering.

Media Query Hacks
@media all and(-webkit-min-device-pixel-ratio:0)and(min-resolution: 1280px){
.selector { Property: Value; }
}
Opera – Opera 10 and above
@media not all and (-webkit-min-device-pixel-ratio:0) {
.selector { Property: Value; }
}
Media Query Hacks
@media all and(-webkit-min-device-pixel-ratio:0)and(min-resolution: 1280px){
.selector { Property: Value; }
}
Internet Explorer / Edge IE 9 Hack
:root .selector {
Property: Value\9; color: red\9;
}
Conditional comments
<!--[if IE 9]> Internet Explorer 9 <![endif]-->
<!--[if lte IE 9]> Internet Explorer 9 or less <![endif]-->
<!--[if gte IE 9]> Internet Explorer 9 or greater <![endif]-->
IE 10 only

_:-ms-lang(x), .ie10 { property: value9; }

Internet Explorer 10+, Microsoft Edge Browser

_:-ms-lang(x), .selector { property: value; }

IE 10 and above
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {    .ie10up {property: value;}
} @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .ie10up {property: value;}
}
IE 11 (and above..) 

_:-ms-fullscreen, :root .ie11up { property:value; }

Internet Explorer 11+, Microsoft Edge Browser

/* Put this code in external stylesheet: ie11up.css */ @charset “<Any Modern Browser but MSIE 10- or FF 18- >”; _:-ms-lang(x), .selector { property:value; }

Microsoft Edge Browser 12+ (All) – @supports method

@supports (-ms-ime-align:auto) { .selector { property:value; } }

Leave a Reply

Your email address will not be published. Required fields are marked *

recent post

Part 3: WordPress…

Recently, I’ve been working on a proof of concept project which int...

 758 Views
Part 2: WordPress…

Uploading Files The goal of the plugin is to convert a PDF in WordPre...

 831 Views
Part 1: WordPress…

WordPress is one of the most popular content management systems on the...

 777 Views
CSS Hacks For Every Web Developer
CSS Browser-Specific Hacks

What is this? Browser hacks is an extensive list of brow...

 1132 Views
What are Operators…

Operators are symbols or keywords that tell the JavaScript engine to...

 2246 Views
CSS3 Visual Formatting…

The CSS3 visual formatting model is the algorithm that is used to pro...

 458 Views
Animatable Properties in CSS3
Animatable Properties in…

The following section contains a complete list of animatable propert...

 477 Views
Custom Permalinks in…

Do you want to create custom permalinks in WordPress for posts, page...

 433 Views
HTML5 Tag Reference

HTML5 has many new tags included and many others deprecated from the...

 448 Views
Resize and Make…

Have you ever tried resizing a image to make it larger? This usually...

 461 Views