5 ms·
When the website loaded, my first action was to zoom out, because the author chose a humongous font size. Somehow, this set off a chain reaction of font size ch
by g15jv2dp 2y ago
When the website loaded, my first action was to zoom out, because the author chose a humongous font size. Somehow, this set off a chain reaction of font size changes that took a few seconds to resolve; I don't know what goes on, but zooming out lowered the size of the body text, then after a noticeable lag the size of the header, which then increased again (?) and then the font size of the body increased again (???). I have trouble believing that a website with this kind of behavior would contain a useful "CSS Tip".
- meindnoch 2y agoClearly you haven't heard about the latest CSS feature: closed-loop font size control.
- nayuki 2y agoNo joke, I've implemented closed-loop font-size control in updateTextSize(), https://www.nayuki.io/res/full-screen-clock-javascript/full-screen-clock-24hr-with-seconds.html https://www.nayuki.io/res/full-screen-clock-javascript/full-...
- meindnoch 2y agoClearly, we need automatic differentiation for DOM attributes, so that Newton-Raphson could be used in such cases.
- Jensson 2y agoIt is really fun to watch it as you zoom though! But yeah, that is the worst reaction I've seen from a page when zooming.
- tuetuopay 2y agoLikely an effect of the circular dependency of stuff. Even with javascript off it's weird, and even at 20% zoom level the font keeps growing up to something I would already consider as too large. Oh well, css sucks, but it's at least funny to look at.
- mananaysiempre 2y agoCSS is specifically designed so that are no circular dependencies (beyond a fixed number of required passes).
- AlienRobot 2y agoCan confirm. But is it a bug or is it a feature?
- CamperBob2 2y agoIf a page malfunctions in a way that 99.999% of sites don't, it's not a feature.
- lukan 2y agoOn a mobile zoom seems to work normally, but pinch-zoom is not the same as browser zoom (ctrl + mousewheel).
- echoangle 2y agoYes, mobile zoom is normally just cropping the viewport and showing only a part of the total website. Desktop browser basically adjust the font size of the root element to zoom, I think.
- lukan 2y ago"Desktop browser" zoom changes the virtual screensize. 50%zoom gets you 2 times document.body.clientWith So all the elements that refer to the screensize, will update automatically, but usually this is quite smooth. But you can listen for the event and do all kinds of things manually (and maybe too much).
- toddmorey 2y agoThere really is good info in the article. It’s less a tip and more detail on the spec that I didn’t know.
- Traubenfuchs 2y agoThe author is generally in no position to lecture anyone about css… https://imgur.com/a/uEwI5mk https://imgur.com/a/uEwI5mk
- ComputerGuru 2y agoHonestly, the typesetting on the entire page is an absolute mess.
- CamperBob2 2y agoExactly. Learning about layout from whoever created this page is like going up to Charlie Brown and asking him to teach you how to fly a kite.
- squidbeak 2y agoThe article doesn't talk about layout or design. Is there anything you object to in the information? Or is it just the 12+yr old design of a personal website you want to snipe about?
- CamperBob2 2y agoAll I'm suggesting is that the general attitude embodied by that page ("Your browser developer doesn't know how to handle zooming. Here, let me show you how it's done") seldom makes the impression the author would like to achieve. Self-awareness is important when you set out to teach others.
- ddtaylor 2y agoNow I want to see a CSS blog by Charlie Day of It's Always Sunny in Philadelphia.
- gedy 2y agoI think it's some CSS transition, not Javascript, but yeah that is really distracting..
- deleted 2y ago[deleted]
- GrantMoyer 2y agoIt's because all the font sizes in the page are relative to: html {font-size: calc(0.5vw + 1rem)} In other words, the (user configurable) browser default size plus 0.5% of the viewport width, which is kind of insane. One (intended?) side effect is that the font size grows and shrinks as you resize the browser window horizontally.
- cantSpellSober 2y agoYes, viewport units (like vw) don't always respect user settings, such as zoom levels or custom font sizes. It seems like a good idea at first (larger viewport? larger text!) but not a recommended practice.
- velcrovan 2y agoThere's a better way to do this: html { font-size: clamp(16px, 2vw, 20px); } Pick a reasonable minimum and maximum, and between them a calculated value that scales with viewport width. (You can see this in action in the sites in my bio.)
- Jabbles 2y agoI wonder whether it worked well in 2012 when the article was written?
- deleted 2y ago[deleted]