CSS on Duma's website

`datalist` for range inputs

Tue, 27 Aug 2024 00:00:00 +0000

The datalist tag has surprised me at least a couple time already. While I still consider native HTML inputs as inadequate and too rigid, I admit that thanks to the datalist tag the UX can improve a bit.

Today I was how far the native range inputs are from for ElasticUI range inputs, the one I currently use. I stumbled upon the MDN Web docs page and particularly on the list attribute: it can contain the id of a datalist component and to enhance the user experience of the input. It seems the only three ways these two tags can interact are:

`:has()` pseudo-selector and current node parent

Fri, 02 Feb 2024 00:00:00 +0000

Today I was finally able to use the :has() pseudo-selector. I’ve heard about that in a superficial way through articles and comments, but I’ve never it in person.

Today at work I needed to implement a workaround, which consisted in setting some CSS rules to the parent of the current node. I’ve always thought it was impossible to achieve, but good folks updated this old question on StackOverflow, explaining how :has() could have helped.

Better viewport units for responsive design

Thu, 01 Feb 2024 00:00:00 +0000

The issue is: using 100vh as a rule to measure the whole viewport height is just faulty on mobile. Ona side note, I belive most of the times this is a bad idea, and people actually want something different, but let’s avoid this topic.

I encountered this issue again today, where one of the web apps I work on has 100vh but now has also the need to be more mobile-friendly.

Child rule does not mean child element

Mon, 15 Jan 2024 00:00:00 +0000

I always tought that, either in SASS or in native CSS nested selector, it was possible only to refine a selector by appending attributes of child nodes. It turns out it isn’t so.

In other words, whenever the & is used in selectors it’s possible to write body & and it’ll create a legit selector. I expected that only refinements like & .some-children-class would work.

This is a partial example to show the mechanism: the haiku is green, while I would have expected it to be blue.

CSS on Duma's website

datalist for range inputs

:has() pseudo-selector and current node parent

Better viewport units for responsive design

Child rule does not mean child element

`datalist` for range inputs

`:has()` pseudo-selector and current node parent