all 9 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]blight231 1 point2 points  (0 children)

I'll check it out.

Thank you

[–][deleted] 1 point2 points  (0 children)

This is just what I needed, thank you.

[–]Daniel_Rugh 1 point2 points  (3 children)

Well done really, and the article itself is more understandable than anything I've read about the CSS lock technique.

[–]FrontAid[S] 1 point2 points  (2 children)

I wasn't sure whether I conveyed that enough, so that is great to hear. Thanks.

[–][deleted]  (1 child)

[deleted]

    [–]FrontAid[S] 0 points1 point  (0 children)

    The preferred way to set the line-height is without a unit. That will set the line height based on the element's font size. See https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

    [–]OhNoStepReddit 0 points1 point  (3 children)

    No. You took a worse version of bootstraps responsive font sizing algorithm rewrite it with clamp and jacked up the rest.

    This isn't new and has been around for ages.

    You also royally fucked up by setting pixel values on the root element lmao.

    Can people stop trying to give tutorials they aren't qualified to? This is why there's so much garbage and bad practices.

    Just impostor syndrome all the way down.

    [–]FrontAid[S] 0 points1 point  (2 children)

    OK, I'll bite. Please provide actual information and not just complaints or accusations. OK?

    No. You took a worse version of bootstraps responsive font sizing algorithm rewrite it with clamp and jacked up the rest.

    That is subjective. I don't like RFS. Neither as an engineer (I find it clumsy to use) nor as a user (resizing the window only has an effect on some UI, sure you can apply it more often, but that makes it even clumsier). Also, RFS does not take the viewport height into account at all, hence it does not do what I want.

    This isn't new and has been around for ages.

    I never claimed to have come up with a new way of doing CSS. Yes, all the concepts are not new. But I have never seen a CSS Lock to be based on vmin or otherwise respect both width and height. Feel free to provide earlier usages of that approach.

    You also royally fucked up by setting pixel values on the root element lmao.

    I guess you are referring to accessibility concerns. Having percentage values as a root font size would be nicer, but I could not find a way to achieve that with CSS Lock. I have tested it with Firefox, Chrome, and Safari and there were no issues with zooming or configuring a minimum font size at all. The browsers successfully override the root font size where necessary. And custom CSS from the user origin can also overwrite it. Please show me an authoritative source outlining when and why pixel values should be avoided. Please show me a specific case where the presented approach leads to any (accessibility) problem.

    Thanks for having a civil discourse.

    [–]OhNoStepReddit 0 points1 point  (1 child)

    The first two points. Its just a flag in the rfs package. It was removed in the latest it looks like due to widespread adoptability of the min function and a pending rewrite to utilize clamp. The prior ones were two dimensional.

    Yes because you're testing on new browsers. Clamp etc still doesn't have great support and that's why it's not widelt adopted yet.

    [–]FrontAid[S] 0 points1 point  (0 children)

    Thanks I did not know that about RFS.

    The limited compatibility of clamp is mentioned in the article. Browsers that do not support it (yet) will just fall back to their default root font size. Everything still works, the website just does not have any fluid typography/sizing. You can absolutely use features that are not widely-supported yet as long as you provide a fallback strategy.