This question is pretty short on purpose, but I'm very curious if it's possible.
Can you fetch other styles inside a CSS Stylesheet "with" CSS?
A bit like doing this with jQuery:
var header_height = $('#header').css('height');
So I can do calculations like this:
#content {
height: calc(100% - property('#header', 'height') - property('#footer', 'height'));
}
Where property would then for example represent the fetching of another tag's CSS-style.
No JavaScript allowed for this question ^^
A short answer: no it's not possible with pure CSS. You can only do that with JavaScript or with restrictions in languages like SASS or LESS that generate pure css. But if the dimensions change dynamically, both won't help either.
Your only chance in CSS is with percentages like
#content {
height: 80%;
}
where the height changes accordingly to the parents height. But this only works with parent elements of course.
Related
Is there any way to use conditional statements in CSS?
I'd say the closest thing to "IF" in CSS are media queries, such as those you can use for responsive design. With media queries, you're saying things like, "If the screen is between 440px and 660px wide, do this". Read more about media queries here: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp, and here's an example of how they look:
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
That's pretty much the extent of "IF" within CSS, except to move over to SASS/SCSS (as mentioned above).
I think your best bet is to change your classes / IDs within the scripting language, and then treat each of the class/ID options in your CSS. For instance, in PHP, it might be something like:
<?php
if( A > B ){
echo '<div class="option-a">';
}
else{
echo '<div class="option-b">';
}
?>
Then your CSS can be like
.option-a {
background-color:red;
}
.option-b {
background-color:blue;
}
No. But can you give an example what you have in mind? What condition do you want to check?
Maybe Sass or Compass are interesting for you.
Quote from Sass:
Sass makes CSS fun again. Sass is CSS, plus nested rules, variables, mixins, and more, all in a concise, readable syntax.
CSS itself doesn't have conditional statements, but here's a hack involving custom properties (a.k.a. "css variables").
In this trivial example, you want to apply a padding based on a certain condition—like an "if" statement.
:root { --is-big: 0; }
.is-big { --is-big: 1; }
.block {
padding: calc(
4rem * var(--is-big) +
1rem * (1 - var(--is-big))
);
}
So any .block that's an .is-big or that's a descendant of one will have a padding of 4rem, while all other blocks will only have 1rem. Now I call this a "trivial" example because it can be done without the hack.
.block {
padding: 1rem;
}
.is-big .block,
.block.is-big {
padding: 4rem;
}
But I will leave its applications to your imagination.
The #supports rule (92% browser support July 2017) rule can be used for conditional logic on css properties:
#supports (display: -webkit-box) {
.for_older_webkit_browser { display: -webkit-box }
}
#supports not (display: -webkit-box) {
.newer_browsers { display: flex }
}
The only conditions available in CSS are selectors and #media. Some browsers support some of the CSS 3 selectors and media queries.
You can modify an element with JavaScript to change if it matches a selector or not (e.g. by adding a new class).
I would argue that you can use if statements in CSS. Although they aren't worded as such. In the example below, I've said that if the check-box is checked I want the background changed to white. If you want to see a working example check out www.armstrongdes.com. I built this for a client. Re size your window so that the mobile navigation takes over and click the nav button. All CSS. I think it's safe to say this concept could be used for many things.
#sidebartoggler:checked + .page-wrap .hamb {
background: #fff;
}
// example set as if statement sudo code.
if (sidebaretoggler is checked == true) {
set the background color of .hamb to white;
}
CSS has become a very powerful tool over the years and it has hacks for a lot of things javaScript can do
There is a hack in CSS for using conditional statements/logic.
It involves using the symbol '~'
Let me further illustrate with an example.
Let's say you want a background to slide into the page when a button is clicked. All you need to do is use a radio checkbox.
Style the label for the radio underneath the button so that when the button is pressed the checkbox is also pressed.
Then you use the code below
.checkbox:checked ~ .background{
opacity:1
width: 100%
}
This code simply states IF the checkbox is CHECKED then open up the background ELSE leave it as it is.
css files do not support conditional statements.
If you want something to look one of two ways, depending on some condition, give it a suitable class using your server side scripting language or javascript. eg
<div class="oh-yes"></div>
<div class="hell-no"></div>
There is no native IF/ELSE for CSS available. CSS preprocessors like SASS (and Compass) can help, but if you’re looking for more feature-specific if/else conditions you should give Modernizr a try. It does feature-detection and then adds classes to the HTML element to indicate which CSS3 & HTML5 features the browser supports and doesn’t support. You can then write very if/else-like CSS right in your CSS without any preprocessing, like this:
.geolocation #someElem {
/* only apply this if the browser supports Geolocation */
}
.no-geolocation #someElem {
/* only apply this if the browser DOES NOT support Geolocation */
}
Keep in mind that you should always progressively enhance, so rather than the above example (which illustrates the point better), you should write something more like this:
#someElem {
/* default styles, suitable for both Geolocation support and lack thereof */
}
.geolocation #someElem {
/* only properties as needed to overwrite the default styling */
}
Note that Modernizr does rely on JavaScript, so if JS is disabled you wouldn’t get anything. Hence the progressive enhancement approach of #someElem first, as a no-js foundation.
Changing your css file to a scss file would allow you to do the trick. An example in Angular would be to use an ngClass and your scss would look like:
.sidebar {
height: 100%;
width: 60px;
&.is-open {
width: 150px
}
}
While this feels like a bit of a hack, and may not work perfectly in all browsers, a method I have used recently combines the fact that CSS (at least in Chrome) seems to ignore invalid values set on properties, and we can set custom properties that fall back to their default value when invalid.
(Note: I haven't deeply tested this, so treat it as a hacky proof of concept/possible idea)
The following is written in SCSS, but it should work just as well in standard CSS:
.hero-image {
// CSS ignores invalid property values
// When this var is set to an image URL, the browser will ignore it
// When this var isn't set, then we will use the default fallback for the var, which is 'none'
display: var(--loading-page-background-image, none);
// This part isn't directly relevant to my 'if' example, but shows how I was actually using this custom property normally
background-image: var(--loading-page-background-image, none);
}
I'm setting the custom property from JavaScript / React, but it would likely work regardless of how you set it:
// 'true' case
const chosenLoaderUrl = "https://www.example.com/loader.png";
// 'false' case
//const chosenLoaderUrl = "";
// containerRef is just a reference to the div object, you could get this with
// jquery or however you need. Since I'm in React, I used useRef() and attached
// that to my div
containerRef.current.style.setProperty(
"--loading-page-background-image",
`url(${chosenLoaderUrl})`
);
When chosenLoaderUrl is set to my url, that url is an invalid value for the display property, so it seems to get ignored.
When chosenLoaderUrl is set to an empty value, it falls back to the default value in my var() statement, so sets display to none
I'm not sure how 'generalisable' this concept it, but figured I would add it to the other suggestions here in case it is useful to anyone.
Your stylesheet should be thought of as a static table of available variables that your html document can call on based on what you need to display. The logic should be in your javascript and html, use javascript to dynamically apply attributes based on conditions if you really need to. Stylesheets are not the place for logic.
You can use combination of jquery and css classes i.e. I want to change a font color of certain element depending on the color of the background:
CSS:
.h3DarkMode{
color: lightgray;
}
.h3LightMode{
color: gray;
}
HTML:
<h3 class="myText">My Text Here...</h3>
JQuery:
var toggleMode = localStorage.getItem("toggleMode");
if (toggleMode == "dark"){
$(".myText").removeClass("h3LightMode").addClass("h3DarkMode");
}else{
$(".myText").removeClass("h3DarkMode").addClass("h3LightMode");
}
No you can't do if in CSS, but you can choose which style sheet you will use
Here is an example :
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
will use only for IE 6 here is the website where it is from http://www.quirksmode.org/css/condcom.html , only IE has conditional comments. Other browser do not, although there are some properties you can use for Firefox starting with -moz or for safari starting with -webkit. You can use javascript to detect which browser you're using and use javascript if for whatever actions you want to perform but that is a bad idea, since it can be disabled.
Please find here a HTML snippet and the corresponding CSS which build a BorderLayout:
https://jsbin.com/zokutalafe/edit?html,css,output
-
The yellow area in that BorderLayout example shall have a height of 100%, unfortunatelly it has not :-(
The question is now: Is it possible to change that yellow container's height to 100% by just modifying the CSS, NOT(!) the HTML, without using new [Edit: I mean "additional"] CSS selectors (means: something like ".borderlayout-center > div { height: 100% }" is not allowed)???
This is for a very special use case - that's why I have the above mentioned strange constraints.
Thanks a lot in advance.
You can use like below:
.borderlayout-center div {
height: 100%;
}
I'm not shure what you mean with new CSS selectors
But something like
.borderlayout-center div{
height: 100%;
}
it's nothing new and it works...
Basic question but I can't find it anywhere, is it possible to set the width and the height on the same line at the same time with the same value in my CSS?
I'm not asking for something like:
width:100%;height:100%;
But more like one of those:
width, height: 100%; // Same for both
width, height: 100%, 90%; // Different for each ones
dimensions: 100% 90%; // Like padding/margin,
I'm just asking about declaration, not Javascript on how to do that.
I found a related question to this one but for border and the short answer was no.
If it's not possible with CSS, is it with SCSS ?
There is no short hand for setting the height and width of the element in a single property declaration. You cannot do it with SASS as well.
But yea, SASS will provide you a feature to hold the common value shared in both property by declaring a variable like
$some-var-name: 100px;
.some-class {
height: $some-var-name;
width: $some-var-name;
}
As I said, even SASS won't help you writing height and width at the same time but you can use change the value of both from a single variable.
Ok I was about to add the #extend in the answer but since other user has already answered the same, (which is now deleted)
.size{
height:100%;
width:100%;
}
element {
#extend .size; //Sets element to height:100%;width:100%;
// more stuff here
}
I would suggest you to use a declaration of % instead of . so instead of using .size suggested use %size. This way your literal class of .size used only for extend purpose won't be included in the compiled stylesheet.
you can use css variable
/* css file */
:root {
--length: 50px;
--ratio: 1;
}
.box {
background: cornflowerblue;
width: calc(var(--ratio) * var(--length));
height: var(--length);
}
<!-- html file -->
<div class="box"></div>
then you can change --length in many ways and box width and height will respect to changes.
and Its better method than the SCSS variable for debugging purposes.
Articles
Comparison between CSS variable vs SCSS variable
Why we prefer CSS Custom Properties to SASS variables
You can set up Sass Mixin, like this:
#mixin size($width, $height) {
width: $width;
height: $height;
}
Then write just:
#include size(100%, 100%);
My little contribution if both w & h are equals :
div {
width: 100%;
aspect-ratio: 1;
}
This doesn't help much in typing, but with this, there is only one place to update.
To add onto the mixin solution by #Allrightman, you could even account for when the width and height are the same by setting a default value for the second parameter to equal the first:
#mixin size($width, $height: $width) {
width: $width;
height: $height;
}
If a user inputs a single value opposed to two, this will set them both to the same thing, covering both use cases.
There is no way to declare height and width at the same time in pure CSS, but you can use preprocessors css like SASS or LESS to declare the value to avoid repetition, but don't forget that after they get complied to CSS, they become pure CSS again...
Fo example in SASS you can do:
$width-height: 100%;
body {
height: $width-height;
width: $width-height;
}
So as you see, you can define it, but after it gets complied to CSS, it becomes like this again:
body {
height: 100%;
width: 100%;
}
But we all know this is not always the case, the CSS for the big applications could be much more complex, and reusing and declaring values using preprocessors css will help a lot to manage your css in a tidier way!...
I need to basically set the content of something with HTML from CSS. I'm currently doing the following:
.myclass {
content "<img src=\"hello.png\"/>";
}
However, instead of the image, I see the literal text:
<img src="hello.png"/>
How can I inject arbitrary HTML using CSS?
HTML stores the data, and is the Model
CSS stores the styles, and is the View
JS stores the interactions, and is the Controller
If you're trying to add data to the page, it should be done via HTML. If you're simply trying to add an image as a style, use the background-image property. You don't need to inject an <img> element in the page to do that.
Don't ever do this, ever
As far as being able to inject HTML into the page via CSS, it's not directly possible, however it's possible to add JavaScript into the page using CSS, which can then add HTML to the page.
I can't emphasize enough how wrong that approach would be.
Unless there is some strange hack that I am not aware of, this cannot be done with pure CSS.
The content property is only able to insert text; if you try to put in HTML, it will be escaped.
That said, you can do something like this with pure CSS:
This is the CSS that can perform that effect:
.myClass:before {
display: inline-block;
width: 32px;
height: 32px;
content: "";
background-image: url("img.gif");
}
You can see this in action on this jsFiddle page.
In this particular case, you can use a pseudo-class (eg ::before), background-image, display:block and a fixed width and height to show the image.
Also, make sure that the colon : is added between content and its value.
A relatively new concept at the horizon is the element() value for backgrounds. This will display HTML as if it were an image: See also -moz-element.
This can be done. For example with Firefox
css
#hlinks
{
-moz-binding: url(stackexchange.xml#hlinks);
}
stackexchange.xml
<bindings xmlns="http://www.mozilla.org/xbl"
xmlns:html="http://www.w3.org/1999/xhtml">
<binding id="hlinks">
<content>
<children/>
<html:a href="/privileges">privileges</html:a>
<html:span class="lsep"> | </html:span>
<html:a href="/users/logout">log out</html:a>
</content>
</binding>
</bindings>
ref 1
ref 2
You can't. It's not what it's for. The CSS is for the presentation layer while the HTML is the data layer.
Actually, you can, but just for characters, not HTML. You can use the content property. With some CSS selectors like :before, you can do nice stuff like adding your own character as a bullet for your list. But not much more.
I'm not sure if I the title's correct, so feel free to edit it to something more descriptive.
How to, if there's a way to, read the width/height of an background-image image and pass it to width/height property of that element in CSS (without the use of JavaScript)?
So, since I think the question is still confusing, I'll best provide an example:
element {
background: url(image.png);
width: auto;
height: auto;
}
I know the above example doesn't work, but I was wondering if there is something similar to it that might.
Thanks!
P.S: I can do it in JS, so posting a JS solution won't be necessary.
There is no way to do this with only CSS.
I'm not sure what else there is to say.
It is impossible - workaraound is to put there img , set overflow to hidden, and put second div in with position relative ( it some setup to fit it all, but it works )