I am developing a web site and have optimized it for Firefox and Chrome. The project contains a style sheet called base.css which is included in all the pages, and which contains some global settings and definitions, including a list of variables which I use to store color values like such:
:root {
--yellow-1: #fff8e3;
--yellow-2: #ffe9a9;
}
and so on, and calling them like for example:
.a-class {
background-color: var(--yellow-2);
}
When I look at the page in Edge, all the colors are missing, and when I use the DOM explorer, it marks all uses of the variables with red underlines. Does Edge not support CSS variables in this way? What can I do to work around this?
MS Edge does support CSS variables from EdgeHTML v15:
https://blogs.windows.com/msedgedev/2017/03/24/css-custom-properties/
This is also backed up here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables#Browser_compatibility
The syntax is as follows:
Declaring a variable:
element {
--main-bg-color: brown;
}
Using the variable:
element {
background-color: var(--main-bg-color);
}
I had the same problem, but I defined variables with opacity. In Chrome it worked fine, but in edge it didn't. After I removed opacity from declarations, it worked fine in Edge as well.
I tried isolating the problem, and it seems there were no problem with this in Edge. Normal CSS works works as supposed to.
When selecting browser prefix elements like:
::-ms-track
::-ms-fill-lower
::-ms-fill-upper
::-ms-thumb
Variables does not work on theese.
Related
While researching how to create a userChrome.css for Mozilla Firefox, I found out that you can do it in different ways:
Example 1:
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#-moz-document url(chrome://browser/content/browser.xul) {
#PanelUI-button {
display: none !important;
}
}
Example 2:
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#PanelUI-button {
display: none !important;
}
First example contains the line #-moz-document url(chrome://browser/content/browser.xul) and the second does not. I'm not sure what it does and ouput of both examples is exactly the same.
Are there any benefits by including #-moz-document url(chrome://browser/content/browser.xul) in userChrome.css?
#-moz-document is the prefixed form of #document, a CSS "#-rule" which restricts the contained rules to certain URLs. So in this case,
#-moz-document url(chrome://browser/content/browser.xul)
restricts its contained rules to browser.xul.
Without going too deeply into userchrome.css research, I expect this means the rules will only apply to "bits of Firefox", and not actual web pages.
You could probably test it out by creating a page with an element of ID #PanelUI-button, and see if the display:none applies to it.
The #-moz-document scope restricts the style rules to that one chrome document. In this case it's the main browser UI which is what you want most of the time. Without that scope the rules would be applied to all chrome pages. This might be what you want if you're creating a theme and want consistent colors and fonts.
If your style rules are manipulating a specific element as in your example then you should limit it to the specific document, but leaving that out generally doesn't cause any problems. In this case, though, you might end up with missing buttons on some unrelated dialog if that document happened to use the same element name.
I'm answering a very old question and more recent versions of Firefox have renamed all the .xul files to .xhtml. You'd want to use #-moz-document url(chrome://browser/content/browser.xhtml) { ... } instead.
To confirm Jeremy's answer, "userChrome.css" applies only to bits of the Firefox UI, not web content. But there is a "userContent.css" file that can be used to apply custom styles to web-content. You will definitely want to scope rules in userContent.css to specific URLs or domains.
Given the problem that browsers (Internet Explorer in my case) sometimes don't correctly apply complex CSS rules, how could one possibly force the evaluation?
A sampe rule:
body[data-some-flag="3"] #someElement .someClass svg stop:first-child {
stop-color: #012d71;
}
The data flag will be set from JS and the styling should change accordingly. In some real world application this will sometimes not work, but when opening F11 browser tools and just selecting the node in the DOM explorer, the rule will then be applied.
Is there a common workaround for this kind of browser issues?
Something like
node.recalculateCssRules()
If you think the browser is not giving priotiry to your css and some other css is overriding it, then you can put !important beside the property to force the browser to use that property.
For Example:
body[data-some-flag="3"] #someElement .someClass svg stop:first-child {
stop-color: #012d71 !important;
}
What worked for me is removing the node and inserting it again at the same position.
This seems to force the browser to evaluate all CSS rules again relevant for the node.
I was trying to make a "multi-row" sprite CSS animation (insipred by this: http://codepen.io/simurai/pen/vmhuJ), only to find that Firefox doesn't support background-position-x or -y.
The lack of -x/-y is discussed at length here: https://bugzilla.mozilla.org/show_bug.cgi?id=550426, and a proposed solution (background-position-y doesn't work in Firefox (via CSS)?) is to use CSS variables, which were recently introduced in Firefox.
However, it doesn't look like updating CSS variables from animation #keyframes is supported?
...
background-position: var(--bgX) var(--bgY);
...
/*Here, CSS variables don't work:*/
#keyframes move-y {
from {
--bgY: 0px;
}
to {
--bgY: -670px;
}
}
Here is a JSFiddle (note: Firefox only): http://jsfiddle.net/phoj0kq5/
I added flickering borders to the animation just to make sure it's running, but the crab doesn't snap its fingers.. Am I using CSS variables wrong, or do they simply not support animation?
Edit
Updated fiddle which actually works in Chrome (still not in Firefox): http://jsfiddle.net/phoj0kq5/1/
This is not a solution, but a workaround that should help:
Since you cannot show a part of the image dynamically when cols and rows are changing one at a time, try using only one column or row of image parts.
When only one line of sub-images is used, you should be able to set the viewed part with background-position: X 0; while X is your offset per image. You will need to edit the image file you are showing to achieve this.
So change the layout of subimages in the image file form:
☺☺☺☺
☺☺☺☺
☺☺☺☺
to:
☺☺☺☺☺☺☺☺☺☺☺☺
As i said, this is not a solution to the problem itself and rather a workaround, but it should work fine on all browsers. However, Mozilla should implement the -x/-y attributes or fix the CSS-variable issue in animations. Until then, i don't see a proper solution for this.
This question already has answers here:
How can I define colors as variables in CSS?
(19 answers)
Closed 4 years ago.
I am trying to use CSS Variables. I look online for tutorials and all of them worked so far.
Here's my CSS:
#variables {
defaultColor: #8E5050;
defaultBackGround: #E1DBC3;
}
body {
background: var(defaultBackGround);
}
a {
color: var(defaultColor);
}
I also tried:
body {
background: #defaultBackGround;
}
a {
color: #defaultColor;
}
None of them works, What am I doing wrong? Thanks
I would use a CSS preprocessor such as Sass or Less.
The variables you are using are not part of the normal CSS specification. It looks like you are writing in some CSS framework.
If you do want to use pure CSS, you are stuck with setting the values of colors / margins / padding manually every time. But a good "Search & replace"-function in your favorite text editor may help you there. :)
If you want to use these variables, #Petah has the right answer for you. :)
Use Native CSS3 Variables!
Variables are actually a native feature in CSS3 - you can read the spec at MDN. However, they are still a relatively new feature, so you may want to check out the Browser Support charts here before using them.
That being said, CSS Variables are supported by the latest versions of Chrome, Firefox, Opera, Safari and Microsoft Edge.
The following code shows an example of how CSS variables can be used:
:root {
--name: #ff0000;
}
p {
color: var(--name);
}
How does this work?
Variables can be used if they are defined on the parent container of the element - here I use :root so that the variable is accessible everywhere.
A variable can be defined using --name:content; where name is the name of the variable and content is the contents of the variable (this can be a color, like #ff0000, a size like 1em, or one of many more possible values).
Then, simply use var(--name) instead of a property in your CSS code, where name is again the name you called the variable.
From what I understand, variables aren't fully supported yet, but this is how you will set them when they are:
/* declare in :root with the usual browser prefixes */
:root {
var-myVariableColor: #f00;
-webkit-var-myVariableColor: #f00;
-moz-var-myVariableColor: #f00;
-ie-var-myVariableColor: #f00;
}
/* to reference encase in var() */
body {
background-color: var(myVariableColor);
}
I think I have tried different methods suggested all over the internet but nothing worked. This is my current css code:
div {
cursor: url(images/zoomin.cur), auto;
}
It works fine except in IE...
Unfortunately, cursor is plain buggy in IE, at least until and including 8
In Internet Explorer for Windows up to and including version 8, if a
relative URI value is specified in an external style sheet file the
base URI is considered to be the URI of the document containing the
element and not the URI of the style sheet in which the declaration
appears.
http://reference.sitepoint.com/css/cursor
You may want be able to use a conditional comment to target IE and then feed it a modified style rule with a different url.
I solved in this way for the grab cursor in Internet Explorer, citing the #JasonGennaro's answer:
In Internet Explorer for Windows up to and including version 8, if a
relative URI value is specified in an external style sheet file the
base URI is considered to be the URI of the document containing the
element and not the URI of the style sheet in which the declaration
appears.
.grab_cursor {
cursor: grab !important; /*Without !important the .cur-file property below will overwrite this and browser will show default cursor*/
cursor: -moz-grab !important;
cursor: -webkit-grab !important;
cursor: url('../img/cursors/openhand.cur'), url('img/cursors/openhand.cur'), n-resize; /* standard: note the different path for the .cur file */
cursor: url('img/cursors/openhand.cur'), n-resize\9; /* IE 8 and below */
*cursor: url('img/cursors/openhand.cur'), n-resize; /* IE 7 and below */
_cursor: url('img/cursors/openhand.cur'), n-resize; /* IE 6 */
}
Files tree:
index.html
css/style.css -> here the posted code
img/cursors/openhand.cur
Good references:
One
Two
Three
Working Demo:
Demo
Because different browsers treat relative URI's differently, the cursor style allows a list of urls. You can have one path that works for IE and one that works for other browsers:
div {
cursor: url('app/images/zoomin.cur'), url('zoomin.cur'), auto;
}
In my setup, the first url works for IE11 (and earlier) because the script that uses the cursor is in 'cgi-bin/app' while the .cur and .css files are in 'app/images'. IE uses the document location as the base, so I need to add more path information to locate the cursor file. The second url works in Firefox because .cur and .css are in the same location and Firefox uses the .css location as the base, so additional path info is not needed.
From msdn documentation:
url(uri)
Internet Explorer 6 and later. Cursor is defined by the
author, using a custom URI, such as url('mycursor.cur'). Cursors of
type .CUR and .ANI are the only supported cursor types.
from : http://www.w3schools.com/cssref/pr_class_cursor.asp
The cursor property is supported in all major browsers.
Note: Opera 9.3 and Safari 3 do not support URL values.
Note: The value "inherit" is not supported in IE7 and earlier. IE8
requires a !DOCTYPE. IE9 supports "inherit".
To work in IE you need specify full path to CUR file. E.g.:
html {
cursor: url("../img/cursor.png"), url("http://www.example.com/dist/assets/img/cursor.cur"), default;
}
this one work for me proved in IE10, INDEXED in the of index.html( you must use absolute routes)
<style type="text/css">
.container{
cursor: url(http://path/of/folder/image.cur), default !important;
}
</style>
I also faced curser pointer rendering problem in IE. Below are my solutions.
There is 2 things which you need to make sure.
Curser file should be .cur or .ani files.
You need to give full url image path. i.e.http://abc.in/static/images/demo.cur
You can face a problem of curser origin start position. SO you can solve that problem by using https://www.cursor.cc. website.
it has an check box of hotspot (where the mouse clicks) by using you can decide your pointer position.
Hope all pointer problem can be solve by above details.
I tried using .ani and .gif and it is working. It should go like this:
body {
cursor: url(images/dog.ani), url(images/dog.gif), progress !important;
}
This css works for my website in chrome, firefox and IE.