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
What Is the Opposite of :Hover (On Mouse Leave)
How to Center Align Horizontal ≪Ul≫ Menu
Possible to Use Border-Radius Together With a Border-Image Which Has a Gradient
How to Change Colour of Blue Highlight on Select Box Dropdown
Center a Position:Fixed Element
Google Chrome Printing Page Breaks
React.Js Inline Style Best Practices
Child Inside Parent With Min-Height: 100% Not Inheriting Height
Why Don't :Before and :After Pseudo Elements Work With 'Img' Elements
Css: How to Say .Class:Last-Of-Type [Classes, Not Elements!]
Disable Less-Css Overwriting Calc()
Why Does the Order of Media Queries Matter in Css
Css Transition Effect Makes Image Blurry/Moves Image 1Px, in Chrome
How and Where to Use ::Ng-Deep
Play Multiple CSS Animations At the Same Time
Use of Xsl-Fo, Css3 Instead of Css2 to Create Paginated Documents Like Pdf