css-element-queries
css-element-queries copied to clipboard
marcj
Unexpected blinking!
I'm using the latest version of the plugin in attempts to create a demo version of the button, which, in the case of long text, the font size is reduced by the given algorithm. But instead of the expected result, I see... https://codepen.io/7iomka/pen/RMyzyq
Looks to me like you have created a loop, rethink your queries/steps and it will work.
@7iomka You could break the loop by giving the btn an explicit width, rather than having its width shrink-to-fit the size of its descendants: https://codepen.io/eeeps/pen/NYzYdm
The loop happens because you're querying the same thing you're conditionally styling. The btn__content font size shrinks, and so its shrinkwrapped btn parent shrinks, which makes the query false, which makes the btn__content font-size grow again, which makes the btn grow again which makes the query true, which...[repeat forever]
@eeeps thanks for explanation and example! It works fine! But! I just wanted to use this plugin for buttons as independent components, the width of which I would not want to limit, I just use only paddings and font-size. I thought this plugin would help me do the following: I want the buttons that have the size of content, for example, do not fit 300 pixels, changed their font-size to the one I set, in which the content would already fit in one line. Naturally, I would do this only on mobile breakpoint. This is a kind of improvement of the UX of an independent component, which I wanted to do every time not to make an exception in the form of a hardcode over a certain button, the content of which was too long to fit on a certain width of the mobile :(
@7iomka maybe a job for http://fittextjs.com ? Fundamentally, if you're trying to query AND change the same thing (here, the width of the text), you're going to have looping problems.