Is there some type of value that can be assigned any arbitrary string using CSS? For example, "large" or "small".
My purpose is to watch a generic div with display: none and change this as-of-yet-unknown type of value "large" or "small" via a media query. Javascript will watch for this change and use the assigned value.
Example HTML:
<div class="state"/>
Example corresponding SASS:
.state {
#media #{$isSmall} {
unknown-type-of-value: "small";
}
#media #{$isLarge} {
unknown-type-of-value: "large";
}
}
You can't change the value of a <div> with CSS, but you can use :after to have css "append" text to it.
Something like
#media screen{
div.test:after{
content: "small";
}
}
#media print{
div.test:after{
content: "large";
}
}
DEMO: http://jsbin.com/edirad/1 (try to print it, and look at the preview)
Related
How can I set CSS rules for windowed mode?
#media all and (display-mode: fullscreen) {
.testfullscreen {
display: none; /*Works*/
}
}
#media all and not (display-mode: fullscreen) {
.testwindowed {
display: none; /*Not working*/
}
}
codepen
You were very close on this, you just needed to move the not to the begging.
According to MDN's docs:
Inverting a query's meaning
The not keyword inverts the meaning of an entire media query. It will only negate the specific media query it is applied to. (Thus, it will not apply to every media query in a comma-separated list of media queries.) The not keyword can't be used to negate an individual feature query, only an entire media query. The not is evaluated last in the following query:
#media not all and (display-mode: fullscreen) {
.testwindowed {
display: none; /*Is working*/
}
}
I have a simple SASS code that may be working like when the user has on his device set preferred color scheme dark the parameters from %dark-theme will extend to <body> and also when the user has preferred color scheme light the %light-theme will be extended instead of %dark-theme to <body>.
The same parameters which are used in %dark-theme and %light-theme may be extended on <body> when <body> have set id to #switched-dark-mode or #switched-light-mode. This IDs are set by Javascript after user switch the theme color.
Is there any solution to how I can make my SCSS clear and parameters which are used in #extends write only one time and use them in media query and also in ID selector?
MY CODE:
%dark-theme {
background: black;
color: white;
}
%light-theme {
background: white;
color: black;
}
#media (prefers-color-scheme: dark) {
body {
#extend %dark-theme;
}
}
#media (prefers-color-scheme: light) {
body {
#extend %light-theme;
}
}
body {
&#switched-dark-mode {
#extend %dark-theme;
}
&#switched-light-mode {
#extend %light-theme;
}
}
Unfortunately you cannot specify multiple selectors when using #media queries in SCSS (or at least to my knowledge). What you have already is a good solution.
One workaround you could try would be to use the "prefers-color-scheme" query in JavaScript when you load the page to apply the appropriate ID on the body element, which would allow you to remove the two #media queries from your SCSS code.
That means you could just move the styles defined in %dark-theme and %light-theme into the appropriate body selector.
Check out this post for reference and other solutions:
How to override css prefers-color-scheme setting
I have a navbar on a website and after reaching a certain point of the height(y axis). I'd like to manipulate the css Code of my navbar for example the background color.
So far so good now I check with an if statement the height and if it overcomes a certain value I manipulate the css of the navbar class....but how can i make sure this gets checked constantly i have used the setInterval method but im not sure if this is a good solution...anyone who can help me out?
Thanks in advance!
function update() {
if (currentHeight>600) {
$(".class").css({"background-color":"blue"});
} else {
$(".class").css({"background-color":"transparent"});
}
}
setInterval(update, 10);
You can do it with jQuery like this:
$(window).resize(function () {
if ($(window).height()>600) {
$(".class").css({"background-color":"blue"});
} else {
$(".class").css({"background-color":"transparent"});
}
});
You can also do it without jquery with using CSS #media tags:
.class {
background-color:blue;
}
#media screen and (max-height: 600px) {
.class {
background-color:transparent;
}
}
If you want to change CSS when your screen is too small, you might not need jQuery:
#media screen and (max-height: 600px) {
.class {background-color:transparent}
}
On a mobile-first design, after changing values with Media Queries, Are we supposed to set them back to their original values on the parent stylesheet? or will it be handled by the browser?
<div id="mobile">
<div class="box1">
<div class="box2">
...
</div>
stylesheet:
( default style for mobile goes here )
#media (min-width: 500px) {
.box1 {
float: right;
}
.box2 {
float: left;
}
}
#media (min-width: 700px) {
.mobile {
display: none;
}
}
like in this case, should I to set the display value to, for example block on the default stylesheet? and/or reset the float attributes respectively?
No, setting default values won't be required in this case.
HTML has default display property with value inline, but say we want default value as block then we might want to specify default values.
This is my class:
.center-block-xs {
// This style is given to an image. I want the image to keep
// its original CSS (whatever the default display and margin
// is for an image) unless the screen size fits within the
// media query below.
}
#media(max-width:767px) {
.center-block-xs {
display: block;
margin-right: auto;
margin-left: auto;
}
}
Basically, what I want to do is this: If an element has the class .center-block-xs, then the CSS should be applied to the element only if the screen size is within the media query. I know I can do this:
#media(max-width:767px) {
.color-red-xs { color: red; }
}
#media(min-width:768px){
.color-red-xs { color: black; }
}
In which case the color is red only if the screen size is within the media query, otherwise it gets overridden with the black color. But I don't want to have to override any CSS in my case; I just want the CSS to be what it normally would be unless the screen size is within the media query. Is this possible?
What you're describing is precisely how CSS and media queries work by default. If you define a class of .center-block-xs within a media query, that definition will only be applied to elements that a) have that class, when b) the media-query rules apply. There is no need to explicitly define the alternative case(s) if you want inherited styles to be applied.
Just set the default color to what you want, such as the following:
.center-block-xs {
color: red;
}
Then set a minimum width for the CSS change, like so:
#media(min-width: 767px) {
.center-block-xs {
color: black;
}
}
when the screen hits a width of 767px, the text will change.