11

Is there a CSS rule that would match elements based on their width? If not, would it be interesting to propose that in the standard?

One could do something like code:max-width(200px) { white-space: nowrap; } to have all small code tag force line break.

I know I could use some js.

Robert Vanden Eynde
  • 681
  • 1
  • 7
  • 18
  • You can already define a CSS class to contain the specific styles you want then use the class name as a selector – SPlatten Aug 29 '19 at 16:05

4 Answers4

3

Is there a CSS rule that would match elements based on their width?

No.

If not, would it be interesting to propose that in the standard?

Maybe, but not the Selectors standard, because Selectors is not intended to be tightly coupled with the styling aspect of CSS.

There were proposals to standardize something called "element queries" a few years ago, but other than a few proofs-of-concept, they seem to have mostly dissipated. Probably because they're just not feasible to spec and implement in a way that is robust (cyclic dependencies immediately come to mind).

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • for the second one simply because we have media query that am sure can handle what he have in mind – Temani Afif Mar 01 '18 at 18:52
  • @Temani Afif: https://stackoverflow.com/questions/12251750/can-media-queries-resize-based-on-a-div-element-instead-of-the-screen – BoltClock Mar 01 '18 at 18:52
  • i know this :) but i meant that if we know the website we developped we know when our element will reach a specific widh at certain break point thus using media query we can handle this ... of course am not talking about complex situation where elements are dynamical or interactive etc as in this case we have JS involved and we can handle this with JS – Temani Afif Mar 01 '18 at 18:55
  • @Temani Afif: Yeah if you can directly correlate the width of an element with a media query, no one is stopping you from using media queries, but it's clear that media queries weren't designed to solve that kind of problem (for reasons you already gave in your comment) and we shouldn't pretend that they were. – BoltClock Mar 01 '18 at 18:58
1

That might become inconsistent because new elements could be unexpectedly affected. I would just add a class that defines {wrap: nowrap;} to any elements in your html. Or if the element width changes on resize, just use some js.

window.onscroll = function(){
    var elementWidth = document.getElementById('elementID').style.width;
    if(elementWidth < 200){ .. do something .. }
    else{ .. reverse changes .. }
}
williamsi
  • 1,498
  • 1
  • 15
  • 15
0

It is not possible to do it using CSS3, but you can use Element Queries. Check this library: https://elementqueries.com

Here is an example:

@element code and (max-width: 200px) {
  :self {
    white-space: nowrap;
  }
}
0

I just saw an example of media queries within a selector, effectively the same thing, although a pseudo-selector would be very nice and likely supplant media queries. I think it would be nice to have a new pseudo-selector :aspect-ratio(4:3) supporting ranges like :aspect-ratio(>4:3). This would be super convenient for styling responsive elements based on their orientation and width to height ratio.

Ted Fitzpatrick
  • 910
  • 1
  • 8
  • 18