Targeting Only Firefox With Css

Targeting only Firefox with CSS

OK, I've found it. This is probably the cleanest and easiest solution out there and does not rely on JavaScript being turned on.

@-moz-document url-prefix() {
h1 {
color: red;
}
}
<h1>This should be red in FF</h1>

What is the best way to have Firefox-specific CSS rules now after @-moz-document has been limited

You could use a @supports feature query testing some specific vendor prefixed -moz- value, e.g.

Codepen demo


<p class="moz">Is it Mozilla?</p>

CSS

.moz::after { content: " nope."}

@supports (display: -moz-grid) {
.moz::after { content: " yep!"}
}

Note that this method will work until that specific value (e.g. -moz-grid) is not removed from the vendor in the future and can be also used to detect other vendor values (like display: -webkit-box or display: -ms-flexbox)

Conditional CSS rule targeting Firefox Quantum

Perusing the release notes for Fx Quantum 57, specifically Quantum CSS notes, a number of differences between Gecko and Stylo are listed, and a few hacks come to mind.

Here's one:

  • In Quantum CSS, calc() is supported everywhere that the spec explains it should be (bug 1350857). In Gecko it is not.

You can use @supports with a calc(0s) expression in conjunction with @-moz-document to test for Stylo — Gecko does not support <time> values in calc() expressions but Stylo does:

@-moz-document url-prefix() {
@supports (animation: calc(0s)) {
/* Stylo */
}
}

Here's a proof-of-concept:

body::before {  content: 'Not Fx';}
@-moz-document url-prefix() { body::before { content: 'Fx legacy'; }
@supports (animation: calc(0s)) { body::before { content: 'Fx Quantum'; } }}

Only apply a CSS rule in Firefox

May be this works. It's a hack for Firefox that worked years ago. Have not tested it with latest Firefox.

  @-moz-document url-prefix() { 
#snap {
margin-top: -5%;
}
}

Source: http://css-tricks.com/snippets/css/css-hacks-targeting-firefox/

css media query that targets firefox pc only

Css hack for firefox

@-moz-document url-prefix() { 
.cssSelector {
font-size: 14px;
}
}

Reference

Target CSS only Firefox on Mac

You can use classes to achieve what you want. Sniff out the user's Browser and OS and add a class to body for your specific case. E.g. apply macFirefox class to body if user is using Firefox on Mac, then in CSS use .macFirefox .yourClass { /*CSS rules*/ }.

However it will be better to apply styles in a way which are crossbrowser.

For example in your particular case changing style to


.search-notes {
font-size: 14px;
color: #484848;
position:absolute;
display:inline;
/* position: relative;
top: -20px;
margin: 0 25px 0 22px; */
}

should do the trick.

Updated your fiddle



Related Topics



Leave a reply



Submit