Targeting only Firefox with CSS Last Updated : 03 Aug, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. Comment More infoAdvertise with us Next Article How to Vertically Center Text with CSS? V Vishal Chaudhary 2 Follow Improve Article Tags : Web Technologies CSS Similar Reads How to overlay one div over another div using CSS Creating an overlay effect simply means putting two div together at the same place but both the div appear when needed i.e while hovering or while clicking on one of the div to make the second one appear. Overlays are very clean and give the webpage a tidy look. It looks sophisticated and is simple 2 min read How to disable a link using only CSS? To disable a link using CSS, pointer-events can be used, which sets whether the element in the page has to respond or not while clicking on elements. The pointer-events property is used to specify whether the element should respond to pointer events or not. The following example illustrates this app 3 min read What does the “+†(plus sign) CSS selector mean? The "+" (plus sign) CSS selector, known as the adjacent sibling selector, targets the first element that immediately follows another specified element in the HTML structure. It applies styles only to the directly adjacent sibling after the selected element. Note: The IE8 and earlier versions </DO 1 min read How to Vertically Center Text with CSS? Here are three different ways to Vertically center text in CSS. Vertically center text means aligning text to appear in the middle of its container element.1. Using display PropertyWe can use display: flex to make the container as a flexbox and then applying the align-items: center to vertically cen 2 min read How to horizontally center a div using CSS ? To make an HTML div center horizontally using CSS is quite easy. We can horizontally center any element using the below-mentioned approaches. Before centering a div horizontally we need to create a fixed-size div. We have given a border to the div so the centering of that div can be visible. Set the 2 min read Change an HTML5 input placeholder color with CSS The placeholder selector in the CSS pseudo-element is used to design the placeholder text by changing the text color and it allows to modify the style of the text. In most of the browsers, the placeholder (inside the input tag) is of grey color. In order to change the color of this placeholder, non- 2 min read How to Disable Text Selection Highlighting using CSS? The user-select property in CSS is used to disable text selection highlighting in CSS. This feature is useful when we need to disable the copy option of content.Syntaxuser-select: none;-webkit-user-select: none; /* Chrome, Opera */-webkit-touch-callout: none; /* Safari */-moz-user-select: none; /* F 2 min read How to Align Content of a Div to the Bottom? Here are different ways to align the content of a div to the bottom.1. Using CSS PositioningThe positioning involves setting the parent container to position: relative and the content to position: absolute with bottom: 0, which places the content at the container's bottom edge.Syntax:position: absol 2 min read Displaying XML Using CSS XML stands for Extensible Markup Language. It is a dynamic markup language. It is used to transform data from one form to another form. An XML file can be displayed using two ways. These are as follows :- Cascading Style Sheet Extensible Stylesheet Language Transformation Displaying XML file using C 4 min read How to Include One CSS File in Another? Here are the methods to include one CSS file in another:Method 1. Using @import RuleThe @import rule allows you to import one CSS file into another, enabling modularity and reusability of styles.html<html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> 3 min read Like