Code to make CSS function only in Specific browser
In this article, we can know how to write browser specific CSS and applying styles for it. These hacks will be useful for browser specific hacks. Will usefull for designers for designing based on different browsers
Code to make CSS function only in Specific browser
HTML, CSS and JAVASCRIPT running in different Browsers as some issues in designing presentation. Here are some codes which helps the designer to write code which will be read only by specific browsers .
Internet Explorer :-
The coding syntax below should be included in the HTML file as shown below. This will make the CSS only to function in IE of specified version.
Syntax:
<!--[if IE 8]> = IE8
<!--[if lt IE 8]> = IE7 or below
<!--[if gte IE 8]> = greater than or equal to IE8
Eg:-
<!--[if lt IE 7 ]><link href="ie.css" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if IE 7 ]><link href="ie.css" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if IE 8 ]><link href="ie.css" rel="stylesheet" type="text/css" /> <![endif]-->
Mozilla Firefox :-
The coding syntax below should be included in the CSS file as shown below.
Syntax:
@-moz-document url-prefix()
{
}
Eg:-
In css file this should be written as below
@-moz-document url-prefix()
{
#example_id
{
}
}
This will make the CSS only to function in Firefox browser.
Google Chrome & Safari :-
The coding syntax below should be included in the HTML file as shown below. This will make the CSS only to function in Google Chrome browser.
Syntax:
Include type="chrome/safari/css/text" in <link>
Eg:
<head>
Eg:
@media screen and (-webkit-min-device-pixel-ratio:0) {
#example_id
{
}
}