I was checking the #supports property and it worked for this code -
#supports(display: block) {
.message{
background: red;
}
}
here it is giving red background but the following code doesn't work
.message{
background: green;
#supports(display: block){
background: red;
}
}
in this case the background should be red but it is coming out green. I have checked this on chrome edge and even on codepen. What is the problem ?
At-rules can't be nested within style rules. Wherever you're seeing that nested #supports rule working must be using some kind of preprocessor.
Related
Edge doesn't support CSS mask, yet the #supports statement below is calculating as true and the enclosed styles are being applied in Edge. What can I put into the #supports argument to get Edge to ignore the conditional block
body {
font-family: monospaced;
color: red;
background-image: url(test.png);
}
#supports(mask: url("")) {
body {
background-color: #eee;
font-family: sans-serif;
color: rebeccapurple;
mask: url(test.svg);
mask-size: cover;
}
}
<h3>This should be red and mono-spaced in Edge</h3>
According to the Edge API docs, mask is supported, but since I'm ultimately just looking for support of a mask image, I can do:
#supports(mask-image: url("")) {
body {
…
mask-image: url(test.svg);
…
}
}
Cleaner and more specific.
The docs mention that a maskImage style property is supported, but I can't get that to work.
Now that Chrome (and Chromium browsers such as Edge) support inspection of #supports rules via DevTools, it can be clearly seen in Edge 100 that mask-image is not supported.
Here is a screenshot
using
#supports (display: flex) or (mask-image: url("")) {}
and you can see the highlighted button has a green background-color. Inspecting in DevTools shows all the elements and rules applied - also see (in the red box) how the background-color not in the #supports rule is overwritten.
However, when I change the rule to
#supports (mask-image: url("")) {}
the button is now orange/black b/c the #supports condition is no longer being met.
Clearly, mask-image is not supported by Edge.
Are there any tools to compile CSS custom properties declared at not :root rule? I want following code with custom properties
.dark {
--bg-color: black;
--fg-color: white;
}
.light {
--bg-color: white;
--fg-color: black;
}
.foo {
background: var(--bg-color);
display: block;
}
.bar {
color: var(--fg-color);
display: inline;
}
be compiled to their non-custom-prop equivalents like that
.light .foo, .light.foo {
background: white;
}
.dark .foo, .dark.foo {
background: black;
}
.light .bar, .light.bar {
color: black;
}
.dark .bar, .dark.bar {
color: white;
}
.foo {
display: block;
}
.bar {
display: inline;
}
The goal is to
switch color schemes by switching dark/light class on root DOM element
use valid css syntax (no sass less)
keep rules code compact
It's actually not safe to do that. I can tell you because I tried so hard to make a safe transformation.
But I failed.
https://github.com/postcss/postcss-custom-properties/issues/1
Ideal solution. Your example is valid CSS and can be used in many browsers (not in IE, Edge (but is in development) and Opera Mini as of writing this answer, 2017-03-27, other major browsers are fine).
Suboptimal solution. Some CSS can be transpiled to achieve better browser support. The solution I found does not support variables on non-:root elements, however. There are also other objections against transpiling of 'future' CSS into 'current' CSS. To the best of my knowledge, you will have to implement your own transpiler (or postcss plugin) if you want to transpile custom properties not on the :root element, but be warned that that is hard in general. Now you don't need the general part, so it is possible. Just does, to the best of my knowledge, not exist yet.
Preprocessing solution. Of course, you don't need a general implementation of custom properties. You have different themes that have their own values for the same set of properties and that's it. Thus, a separate stylesheet can be created as a preprocessing step using any CSS preprocessor.
Now you say the following,
use valid css syntax (no sass less)
but I am going to show this anyway, because I believe that it is a valid solution to your problem. It is definitely the only one I know that actually works if you want to/need to support IE, Edge and/or older versions of other major browsers (Firefox < 31, Chrome < 49, Safari < 9.1, Opera < 36)
You could do this using SASS for example, to do the transpiling on the server side.
// define styles, use variables throughout them
// your entire style definition goes into this mixin
#mixin myStyles($fg-color, $bg-color) {
.foo {
display: block;
background: $bg-color;
}
.bar {
display: inline;
color: $fg-color;
}
}
// define themes, that set variables for the above styles
// use named arguments for clarity
.dark {
#include myStyles(
$fg-color: white,
$bg-color: black
);
}
.light {
#include myStyles(
$fg-color: black,
$bg-color: white
);
}
This compiles to the following.
.dark .foo {
display: block;
background: black;
}
.dark .bar {
display: inline;
color: white;
}
.light .foo {
display: block;
background: white;
}
.light .bar {
display: inline;
color: black;
}
This is not exactly what you want to obtain, but very close. Realistically, I think this is the closest you will get to obtaining your desired output. I know you want to
keep rules code compact
but what you are saying there (I think) is that you want to split out custom properties from their rules to save on number of rules, which is not something any preprocessor I know supports.
You can organize your source SASS in separate files to keep an overview easily. You can even set up a build system that generates a separate stylesheet for every theme you have. It is then possible to have your users select an alternative stylesheet. Browsers have some support for this, but switching using JavaScript is also definitely possible in the latter case. Simply set all stylesheets to be disabled except for the selected one. Here is an example.
Is there any way, of having a if like syntax, where I can check (for an example) there are more than input[type="text"]
Something like:
.my-element >= 1 {
border: 1px solid red; // Each .my-element will have a red border
}
.my-lement == 1 {
border: 1px solid green; // The only .my-element will have a green border
}
In javascript I would do something like:
if ($('input[type="text"]').length >= 1)
I mentioned LESS in the title, because I'm writing my css code in a LESS syntax
You can, in some cases, approximate this (albeit it requires an up-to-date browser, compliant with CSS3):
input {
border-color: #f00;
}
input:only-of-type {
border-color: #0f0;
}
JS Fiddle demo.
The above works on the assumption that you're trying to style an input element which is the only input element (or 'element of that type') as a child of its parent (it has no siblings of the same input element-type).
If, however, you're trying to style an element differently according to whether it has any sibling elements, you can use:
input {
border-color: #f00;
}
input:only-child {
border-color: #0f0;
}
JS Fiddle demo.
References:
:only-of-type (Mozilla Developer Network).
:only-of-type (W3C.org).
NO, in CSS there is no if else . Use JavaScript for changing your css dynamically.
the if statement is not present in LESS as well. But this language supports guard expression which may help in mimicking some if statements.
Check this tutorial
I am a newbie to CSS.Look at the pic:
http://i.stack.imgur.com/Y9X6K.jpg
Why img{border:2px,solid,red;} on the right is line-through,and in the browser the image hasn't border.
Anybody can tell me the reason?
Remove the commas because, your css statement is incorrect, hence the warning in the inspector:
img{border:2px solid red;}
A strike through a css rule in a developer tool such as in chrome means the rule is not being applied. In your case this is because your css is invalid there shouldn't be commas i.e
img { border:2px,solid,red; } /* invalid css */
img { border: solid 1px red; } /* valid css */
this expands to all shorthand css rules i.e
p { margin: 0 10px 0 10px; }
It can also mean it is being overridden somewhere else you can use !important at the end of a declaration to force the style i.e
img { background: red !important; }
Just remove those commas and make your css like this
img {
border:2px solid red;
}
multiple commas are used for define multi classes css.For more information check this link
I want to zebra-stripe a html table without using any js stuff or writing server-side code to generate even/odd classes for table rows. Is it ever possible to do using raw css?
It is possible, with CSS3 selectors:
tr:nth-child(even) {
background-color: red;
}
tr:nth-child(odd) {
background-color: white;
}
According to caniuse.com, every browser supports it now.
If all you're changing is the background colour, then the following would work, where test.gif is a 40px high image with the top 20px one colour, and the bottom 20 pixels the other colour. If you need to change any other css properties you're pretty much stuck.
table { background: url(test.gif) top; }
table tr { height: 20px; }
http://www.w3.org/Style/Examples/007/evenodd
CSS 3 nth-child. Since browser support is limited you can reproduce the behavior with Sizzle (included in, jquery for example)
(In CSS <= 2) Nope. Unfortunately there aren't any selectors (in CSS <= 2) that operate based on the position (in terms of the number it is within it's parent's children) which I believe you would need to do this with just CSS.
Note to self: read up on CSS3, already!
In http://www.w3.org/TR/css3-selectors/#structural-pseudos you can find explanation and examples on using nth-child:
tr:nth-child(2n+1) /* represents every odd row of an HTML table */ {
background-color: green;
}
tr:nth-child(odd) /* same */ {
background-color: green;
}
tr:nth-child(2n+0) /* represents every even row of an HTML table */ {
background-color: pink;
}
tr:nth-child(even) /* same */ {
background-color: pink;
}
Good luck with browser compatibility - you'll need it.
There are hacks to make it work in IE (using JS) - I'll leave that sifting to you.