CSS Container Queries in Web Components

Post by goldenkey » Sun, May 16, 2021, 7:54 PM UTC

jraph wrote: post #48

FriedrichN wrote: post #3

Earlier quoted context omitted.

Every time I hear someone complain about CSS I just know they've never used it in the IE6/7 days. Good lord, the amount of hacks, shims, fallbacks, polyfill, obscure stuff you had to do to make it work in IE6, IE7, and my absolute favourite(!) the IE7 compatibility mode which was like IE6 but not quite! Ever since the wide adoption of stuff like flexbox and grid I haven't dared to complain about not getting stuff to…

My favorite obscure thing: you sometimes had to add the zoom:1 CSS declaration so the element would "have layout", Whatever that meant, so it behaved the way you wanted. You also had the various filter: progid:DX… declarations to make things that came with other browsers work on IE using DirectX directives. This would, by the way, break the CSS syntax because of the colon in the value, but fortunately parsers of othe…

  .container {
    $footer-size: 2em;
    box-sizing: border-box;
    height: 100%;
    padding-bottom: $footer-size;

    .footer {
      position: absolute;
      bottom: 0
      left: 0;
      height: $footer-size;
    }
  }

Post by e111077 » Sun, May 16, 2021, 7:57 PM UTC

qbasic_forever wrote: post #32

jrochkind1 wrote: post #13

Earlier quoted context omitted.

I am not very familiar with the technology. Under current standards, is it possible to choose to write a web component that does not have any JS, it just uses CSS to take advantage of these things?

No, a web component by definition must be a class that inherits from a HTMLElement base class and implement some basic rendering functions. In addition you must make the browser aware of the component by calling a CustomElementRegistry.define function with your class and the desired component name. So at a minimum there's about 5-10 lines of boilerplate JS necessary to define and register a basic component.

Post by jraph » Sun, May 16, 2021, 8:01 PM UTC

goldenkey wrote: post #52

jraph wrote: post #48

Earlier quoted context omitted.

My favorite obscure thing: you sometimes had to add the zoom:1 CSS declaration so the element would "have layout", Whatever that meant, so it behaved the way you wanted. You also had the various filter: progid:DX… declarations to make things that came with other browsers work on IE using DirectX directives. This would, by the way, break the CSS syntax because of the colon in the value, but fortunately parsers of othe…

The box-sizing property is actually very useful for when you want to reserve space in a percentage sized element with different sizing units. For example (in SASS CSS): .container { $footer-size: 2em; box-sizing: border-box; height: 100%; padding-bottom: $footer-size; .footer { position: absolute; bottom: 0 left: 0; height: $footer-size; } } Otherwise, one would have to use calc() which isn't supported in older brows…

Post by goldenkey » Sun, May 16, 2021, 8:24 PM UTC

jraph wrote: post #56

goldenkey wrote: post #52

Earlier quoted context omitted.

The box-sizing property is actually very useful for when you want to reserve space in a percentage sized element with different sizing units. For example (in SASS CSS): .container { $footer-size: 2em; box-sizing: border-box; height: 100%; padding-bottom: $footer-size; .footer { position: absolute; bottom: 0 left: 0; height: $footer-size; } } Otherwise, one would have to use calc() which isn't supported in older brows…

Absolutely. By the way, it seems many frontend developers generally prefer box-sizing:border-box, and Bootstrap sets it for all elements by default. Which can be a little disturbing when you don't know it, work on a project that includes bootstrap and you expect content-box. Fortunately, browser dev tools are good at telling you what is going on.

  .subtitle {
    @extend .font-weight-light, .mt-4, .text-white
  }

Post by jraph » Sun, May 16, 2021, 8:42 PM UTC

goldenkey wrote: post #58

jraph wrote: post #56

Earlier quoted context omitted.

Absolutely. By the way, it seems many frontend developers generally prefer box-sizing:border-box, and Bootstrap sets it for all elements by default. Which can be a little disturbing when you don't know it, work on a project that includes bootstrap and you expect content-box. Fortunately, browser dev tools are good at telling you what is going on.

Thanks, I wasn't aware of this disparity. I handwrite my CSS, been doing it for 21 years now. If I was to use Bootstrap or Tailwind, I'd likely use @extend and @include to compose my own classes. A long time ago, I read an article that stated, with authority, that Bootstrap was being misused. That class names like "font-weight-light mt-4 text-white" should instead have been replaced with "subtitle" with CSS: .subtitl…