I have used this hack to make css changes needed for firefox. It has worked, but when I validated the code I have the below error. Can I use the code below, or is there a better way?
751 Sorry, the at-rule #-moz-document is not implemented.
798 Parse Error }
/*********************************
FIRE FOX HACK TO FIX ERRORS
***********************************/
#-moz-document url-prefix() {
#rectangle {
width: 1030px;
right: -100px;
}
}
Any CSS at-rule that starts with #-moz- is a Gecko-engine-specific rule i.e. it is a Mozilla-specific extension, not a standard rule.
The url-prefix rule here applies the contained style rules to any page whose URL starts with it. When used with no URL argument like #-moz-document url-prefix() it applies to ALL pages. That's effectively a CSS hack used to only target Gecko (Mozilla Firefox). All other browsers will ignore the styles.
Hence, you can perfectly use #-moz- styles to target only the Firefox browser.
See here for a list of other Mozilla-specific extensions.
See here for valid #moz document rules.
Related
For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS:
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
But are those styles hardcoded or is merely adding a prefix address that browser?
For example, if I want to change the margin only in Firefox could I simply add the prefix like so:
-moz-margin:-4px;
margin: 1px;
NICE TO KNOW:
And if that's possible is it possible to address a specific version or platform? For example, -moz-4.3-margin:-4px; not that I'd want to, just wondering.
And does the prefix approach work cross browser? I'm wondering because Internet Explorer.
Finally, will margin:10px ever knock out -moz-margin:10px? As in, "We, Mozilla, finally support margin so we are going to ignore all old -moz-margin tags and will just use the value in the margin tag".
It's very bad habit to apply css for specific browser. But there are solutions also:
Only Moz:
#-moz-document url-prefix(){
body {
color: #000;
}
div{
margin:-4px;
}
}
chome and safari:
#media screen and (-webkit-min-device-pixel-ratio:0) {
body {
color: #90f;
}
}
Below IE9:
<!--[if IE 9]>
body {
background:red;
}
<![endif]-->
I recommend don't use this moz, and safari prefix untill and unless necessary.
For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS
No, that isn't how it works.
Vendor prefixed properties are used for experimental features. Either because the specification for the property hasn't been locked down or because the browser implementor knows their are problems with the implementation.
In general, you shouldn't use them in production code because they are experimental.
Support for the vendor prefixed versions is removed as support stabilises.
Is there a way to set any style for a specific browser in CSS?
There are several methods that have been used for that effect.
Parser bugs
By exploiting bugs or unsupported features in specific CSS engines (e.g. some versions of IE will ignore a * character on the front of a property name while other browsers will (correctly) discard the entire rule).
Conditional comments
Older versions of Internet Explorer supported an extended HTML comment syntax that could be used to add <link> or <style> elements specifically for certain versions of IE.
Support for this has been dropped.
JavaScript
Classes can be added to elements (typically the body element) using JavaScript after doing browser detection in JS.
As far as I know, prefixes were added to properties when CSS3 was being implemented by different browsers, and just property wouldn't work so we'd use -prefix-property for certain properties like gradient or border-radius. Most of them work without the prefix now for most browsers, and the prefix system has been kept only for backward compatibility.
For example, if I want to change the margin only in Firefox could I simply add the prefix like so:
-moz-margin:-4px;
margin: 1px;
This won't work. You can, however use different stylesheets for different browsers (say IE) in this manner:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
The browser-specific prefix version thing doesn't exist.
Hope this answers your question.
As a workaround you can detect browser version in JS, and add it to class of your root element. You can detect browser through user agent , and there are multiple libraries in npm.
Using this class as a base, you can target browsers
function detectBrowser() {
if (navigator.userAgent.includes("Chrome")) {
return "chrome"
}
if (navigator.userAgent.includes("Firefox")) {
return "firefox"
}
if (navigator.userAgent.includes("Safari")) {
return "safari"
}
}
document.body.className = detectBrowser()
p {
display: none;
}
.safari .safariSpecific, .firefox .firefoxSpecific, .chrome .chromeSpecific {
display: block
}
My Browser is
<p class="chromeSpecific">Chrome</p>
<p class="firefoxSpecific">Firefox</p>
<p class="safariSpecific">Safari</p>
I'm trying to have some custom rules for firefox, and up until now I used
#-moz-document url-prefix()
But according to the docs #-moz-documentwill not be supported in future versions.
Instead #document will be supported.
So I changed from this:
#-moz-document url-prefix() {
...
}
To this
#-moz-document url-prefix(),
#document url-prefix() {
...
}
But for some reason now, the rules no longer apply
The reason this won't work is that chained CSS selectors/directives are evaluated as one.
If one of the parts fails evaluation the entire style is disregarded
Example:
// 😔
[type="range"]::-moz-range-thumb, [type="range"]::-ms-thumb { ... }
makes IE skip makes Firefox skip
// 😀
[type="range"]::-moz-range-thumb { ... } makes IE skip (Firefox will work)
[type="range"]::-ms-thumb { ... } makes Mozilla skip (IE will work)
In your case current Firefox will understand #-moz-document url-prefix() but not #document url-prefix() causing it to skip the style.
Therefore when dealing with vendor specific implementations always keep your styles separated.
I hope it made sense :-)
From the MDN page:
From version 61: this feature is behind the
layout.css.moz-document.content.enabled preference (needs to be set to
true). To change preferences in Firefox, visit about:config.
#-moz-document has been a quite useful hack to target Firefox in CSS. For instance,
#-moz-document url-prefix() {
/* Firefox-specific rules */
}
But now since https://bugzilla.mozilla.org/show_bug.cgi?id=1035091 has been fixed, the old hack does not work anymore in Firefox Developer Edition and I believe this patch will land in the stable version soon. So
As Far As I Understand, UA sheets are the ones come with the browser for default element looking but what are user sheets?
Are there any CSS-only alternative implementations?
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)
I used some CSS hacks in my code and I changed it but now it does not work anymore.
Here is the example
#-moz-document url-prefix() {
h1:before {
top: 102px;
}}
before I used this code (that worked):
#-moz-document url-prefix() {
div#hr-title {
top: 102px;
}}
I dont understand. why does it not work anymore? Thanks in advance
It appears you're trying to use a Gecko-specific (as in Mozilla Firefox) CSS property. There's no reason it shouldn't work in Firefox, and without any further context or example we can only take wild guesses as to why it doesn't work in your setup. Are you trying to use it in a non-Firefox browser?
You may also want to re-evaluate this hack and try to write your CSS such that you don't need to target specific browsers with disparate styles.
for instance:
I have a min-height on an element:
#myElement
{
min-height: 800px;
min-height: 799px;
}
and in IE I want it to only interpret the min-height:799px;
The best way is to use Conditional Statements and create a stylesheet just for IE. A Google Search will bring back many results but I find this to be very useful:
http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/
If you look at the bottom of that article, it is possible to use hacks (although I don't recommend them) to target specific IE version within the SAME stylesheet.
With FireFox you can use the moz prefix like so:
#-moz-document url-prefix() {
#myElement {
min-height: 800px;
}
}
I'm sure there would be ones for Opera, Safari etc too - just search for browser specific conditional statements in Google :)