Targeting only Firefox with CSS
Sometimes the content needs to focus on the particular browser. This article target the Firefox browser to display CSS property. The targeted CSS will works only for targeted browser. Target the Firefox browser with CSS in many ways. Some of them are discussed below:
Method 1: This method uses Mozilla specific extension to add CSS property. This extension supply the CSS property only in Firefox browser.
Syntax:
@-moz-document url-prefix() {
element {
// CSS Property
}
}Example:
html
<!DOCTYPE html><html> <head> <title>Targeting firefox with CSS</title> <style type="text/css"> @-moz-document url-prefix() { h1 { color: green; font-size: 34px; text-align: center; } p { font-size: 24px; text-align: center; } } </style> </head> <body> <h1>GeeksforGeeks</h1> <p>A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes etc. </p> </body></html> |
Output
Method 2: The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using platform-native styling based on the operating system’s theme.
Syntax:
@supports (-moz-appearance:none) {
element {
// CSS Property
}
}Example:
html
<!DOCTYPE html><html> <head> <title>Targeting firefox with CSS</title> <style type="text/css"> @supports (-moz-appearance:none) { h1 { color: green; font-size: 34px; text-align: center; } p { font-size: 24px; text-align: center; display:block; padding: 20px; background: green; color: white; } } </style> </head> <body> <h1>GeeksforGeeks</h1> <p>A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes etc. </p> </body></html> |
Output:
Note: The CSS style of above examples will work only in Firefox browsers.
Please Login to comment...