css-variables

问题 Before I get completely shot down in flames on here, I can't think of any other way of wording or phrasing this question other than how I'm doing as follows.... I would like to set 2 additional breakpoints in Bootstrap 4 for 1366px and 1920px as Bootstrap's xl is very limited at just 1200px. My page references bootstrap.min.css and bootstrap.bundle.min.js. I have added --breakpoint-xxl:1366px;--breakpoint-xxxl:1920px; directly after --breakpoint-xl:1200px; in the boostrap.min.css file and I

问题 My Web Component uses CSS variables. These variables need default values. They are used in many files, so I want to provide the defaults once, and only once . This first attempt makes the text black. Why? What is the correct way to provide the defaults once? .a { --my-variable: red; } .b { --my-variable: var(--my-variable, blue); } <div class="a"> <div class="b"> <span style="color: var(--my-variable);">text</span> </div> </div> 回答1: This first attempt makes the text black. Why? Because this

问题 My Web Component uses CSS variables. These variables need default values. They are used in many files, so I want to provide the defaults once, and only once . This first attempt makes the text black. Why? What is the correct way to provide the defaults once? .a { --my-variable: red; } .b { --my-variable: var(--my-variable, blue); } <div class="a"> <div class="b"> <span style="color: var(--my-variable);">text</span> </div> </div> 回答1: This first attempt makes the text black. Why? Because this

问题 My Web Component uses CSS variables. These variables need default values. They are used in many files, so I want to provide the defaults once, and only once . This first attempt makes the text black. Why? What is the correct way to provide the defaults once? .a { --my-variable: red; } .b { --my-variable: var(--my-variable, blue); } <div class="a"> <div class="b"> <span style="color: var(--my-variable);">text</span> </div> </div> 回答1: This first attempt makes the text black. Why? Because this

问题 I'm trying to change the selection color for an entire web page using a css variable: html { --my-var: red; } ::selection { background-color: var(--my-var); } <p>a b c</p> <div> <p>x y z</p> </div> I correctly see the selection styling applied. However if var references a variable that is not defined, there is no selection color at all: html { --my-var: red; } ::selection { background-color: var(--not-my-var); } How can I define a selection color for an entire page that uses a css variable

问题 Am I misunderstanding the capabilities of css variables? I am trying to pass a background image url to a variable like this: It seems to be working fine when I pass something simple like a color etc... :root { --slide-1: url(/static/images/slideshow/slide1.jpg) ; --slide-2: url(/static/images/slideshow/slide2.jpg) ; --slide-3: url(/static/images/slideshow/slide3.jpg) ; --slide-4: url(/static/images/slideshow/slide4.jpg) ; --slide-5: url(/static/images/slideshow/slide5.jpg) ; } //and then

问题 :root { --color: blue; } div { --color: green; color: var(--color) } #alert { --color: red; color: var(--color) } <p>What's my color?</p> <div>and me?</div> <div id='alert'> What's my color too? <p>color?</p> </div> In the above code, how can I access the global value of --color in div with id='alert'? Or in other words is there any way in CSS to access the global variable like the :: (scope resolution operator) in c++?? 回答1: You Can't do that with CSS. If You'll repeat the declaration of the

问题 I'd like to create a variable for the text color, but depending to the background color that I've set. :root { --main-color-hue: 205; --main-color-saturation: 73%; --main-color-luminosity: 29%; --main-color: hsla(var(--main-color-hue), var(--main-color-saturation), var(--main-color-luminosity), 1); --main-dark-color: hsla(var(--main-color-hue), var(--main-color-saturation), calc(var(--main-color-luminosity) * 0.5), 1); --main-light-color: hsla(var(--main-color-hue), var(--main-color

问题 What I'm trying to achieve in javascript will look like this: myVar = newVar || myVar; In css I'm doing the following: --my-var: var(--new-var, var(--my-var)) Seems like it does not work. Is it even possible to have an old value in fallback if new value is undefined? 回答1: You can't assign the value of a custom property as a fallback value in a var() expression when redeclaring the same custom property. The old value is overridden during cascade resolution, so there would be no old value left

问题 I can't change the CSS color variables in my company's CMS, which are written in 6-digit hex values. Can I use those variables to get a lighter shade of the predefined color value using just CSS? Edit: I still need the color to refer to the variable. I'm building a templated page for different sites hosted on our CMS and different sites have different colors set for the --primary, --secondary, etc variables. So I can't outright just go put a static RGB value conversion for the template since