Comments on: The Raven Technique: One Step Closer to Container Queries

By: Mathias Hülsbusch

Mathias Hülsbusch — Fri, 19 Mar 2021 19:33:23 +0000

In reply to Matthew Anstey. Font Site does not work with the Raven, since 100% (base-width) ist not defined for font-size.

By: Matthew Anstey

Matthew Anstey — Fri, 19 Mar 2021 08:33:55 +0000

Great article!

I have played with your code pen, tried adding font-sizes and I am curious why

font-size: calc(var(--is_medium) * 100);

doesn’t appear to work. Is there a reason for this?

By: Mathias Hülsbusch

Mathias Hülsbusch — Wed, 11 Nov 2020 12:55:59 +0000

In reply to Gilson Nunes Filho. OK .. I messed up the naming there. And I changed it to conW and conH. Just referencing the parent is a bit strange when working with components (the html structures may be deeper than one level). Either use the current stacking context or introduce a new reference model.

By: Mathias Hülsbusch

Mathias Hülsbusch — Wed, 11 Nov 2020 12:50:52 +0000

In reply to Tom Callahan.

OK …. maybe do not use the raven alone to hide stuff … at least not screen-reader relevant things.

By: Gilson Nunes Filho

Gilson Nunes Filho — Wed, 11 Nov 2020 11:17:18 +0000

This is awesome! I strongly agree with container units but the ‘ch’ unit already exist. Maybe using something like pw, ph, pmin and pmax, where p stands for parent.

By: Mikko Tapionlinna

Mikko Tapionlinna — Wed, 11 Nov 2020 06:16:56 +0000

Btw, ch and cw units already exist in css, but they're in relation to character height and character width, not container height and width. This tripped me a bit while reading.

By: Mikko Tapionlinna

Mikko Tapionlinna — Wed, 11 Nov 2020 06:07:38 +0000

Really cool, this opens up many possibilities! One thing to note about hiding things the way as suggested by the article is to consider accessibility and screen readers. If I understood correctly, none of the suggested ways here hide the content from screen readers. Also content will be tabbable, so if you have a link on the hidden content, it will still be tabbed through while hidden.

By: Andre van Rensburg

Andre van Rensburg — Wed, 11 Nov 2020 04:18:50 +0000

Absolute:ly brilliant;

By: Tom Callahan

Tom Callahan — Wed, 11 Nov 2020 01:10:21 +0000

The method used to “hide” things doesn’t seem like it would be accessibility-friendly — wouldn’t screen readers still see the contents of those elements? Same with keyboard navigation.

Also, this hurts my brain badly and while I’m super impressed with your CSS math skills, it just makes me want real media queries that much more!

By: Kato Isa

Kato Isa — Tue, 10 Nov 2020 20:55:12 +0000

This is really help full thanks do much had lots of trouble aligning elements and making them responsive ….