0

I am looking for eg. "width: min-content" not "width: 210px" or "green" instead of "rgb(0,255,0)". So $(elem).css("width") is not what I am searching for.

I take the naming (specified or computed) from MDN

The specified value of a CSS property is the value it receives from the document's style sheet. The specified value for a given property is determined according to the following rules: ...

The computed value of a CSS property is the value that is transferred from parent to child during inheritance. It is calculated from the specified value by: ...

vs.:

The resolved value of a CSS property is the value returned by getComputedStyle().

For most properties, it is the computed value, but for a few legacy properties (including width and height), it is instead the used value.

The used value of a CSS property is its value after all calculations have been performed on the computed value.

One reason is, that I am overworking some layouts to (almost) only implicit sizes, and warn myself if I missed an explicit width in CSS files.

An other is, that I want to help grid to display a variable count of elements to place it in a more 'square' manner, depending on the space available. Therefore I need to know if the spec for grid items is min- or max-content.

Edit: Walking through styles sheets can't be a solution - that would mean to program the whole inheritance of CSS ...

Roland Soós
  • 3,125
  • 4
  • 36
  • 49
halfbit
  • 3,773
  • 2
  • 34
  • 47
  • IRRC, your only real options in JS are to use `getComputedStyle()` for computed styles (or resolved values, as you defined) or the `style` property on an element. – JoshG Aug 30 '19 at 17:28
  • what about using CSS flexbox. are you looking something like this [https://jsfiddle.net/eptzoqra/](https://jsfiddle.net/eptzoqra/) – Deepu Reghunath Aug 30 '19 at 17:42
  • @AndroidNoobie: thx, but it is not "my definition"; I took it from MDN. It is often mixed up: https://developer.mozilla.org/en-US/docs/Web/CSS/resolved_value – halfbit Aug 30 '19 at 19:11
  • 1
    Yes, I know, I just meant using the definitions you provided. – JoshG Aug 30 '19 at 19:18
  • @DeepuReghunath: although its only one reason for the question: I use Flex at the moment; what I want to program is a more intelligent way of spreading up: in a short: make 2 rows of 4 if not all 8 fit in only one row. not 7 and 1. (or 3 rows 3/3/2) But this question is about getting specified css values. – halfbit Aug 30 '19 at 19:19

1 Answers1

0

I think you have missed css variables => https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

const Root     = document.documentElement
    , gRoot    = getComputedStyle(Root)
    , cssVname = '--min-content'
    , myInput  = document.querySelector('#my-input')

var  currentVal = parseInt( gRoot.getPropertyValue(cssVname) )

myInput.value = currentVal

myInput.oninput =_=>
  {
  currentVal = myInput.valueAsNumber
  Root.style.setProperty(cssVname, `${currentVal}px`)
  }
:root {
  --min-content: 210px;
}

div {
  height: 20px;
  width: var(--min-content);
  background-color : rgb(27, 117, 90);
  margin: 20px;
}
<div></div>

<input id="my-input" type="number" min="100" max="300" step="10" value="210">

you can also use themes => How to over ride css prefers-color-scheme setting

Mister Jojo
  • 20,093
  • 6
  • 21
  • 40