HN

Comments (19)

• Menu

  myfonj
  Some caveats worth mentioning yet missing there:1. many, MANY implementation bugs in `background-clip: text` across browsers, especially Firefox [1], basically safe only for simple cases with no additional transforms or filters.2. `color: transparent` ensures the text will be invisible in every browser that does supports the `transparent` keyword (i.e. basically every single one, presumably) but not support background-clip:text yet, or fail to load or interpret the background-image (like in high contrast/forced colours mode). Use `-webit-text-fill-color: transparent` instead. (Yes, that vendor prefix is necessary, and yes, it is de-facto standardised and implemented in Chrome and Firefox [2]. And yes, it is as absurd as it gets.)3. Touching the `letter-spacing` turns off all ligatures, logically. Could be a good thing, actually, but worth knowing. (Anthropic used to use negative letter-spacing thorough its webpages, but now it seems they abandoned that.)[1] https://bugzilla.mozilla.org/show_bug.cgi?id=1656784 [2] https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...
• Menu

  chrismorgan
  letter-spacing is massively overused. I have Firefox set to only use my chosen fonts (and highly recommend it: it makes the web much better), and this reduction in variation makes non-zero letter-spacing much more obvious to me. At typical body sizes, I will tend to notice (and be displeased by) letter-spacing changes of less than 1% (I notice even 0.1px often).There are only three places where I hold letter-spacing of any kind to be acceptable:1. Art. (This is pretty much the intended context of the article, but I just know it’s going to be taken out of that context.)2. In large headings, slightly reducing letter-spacing may be reasonable, as fonts are often spaced for smaller size usage. But whereas reducing line-height is all but essential, reducing letter-spacing is of marginal value at best. Ideally you have a variable font with optical sizing (the opsz axis), so this is handled automatically.3. In all-caps, small-caps or all-small-caps text, as fonts are generally spaced for runs of lowercase letters. https://practicaltypography.com/letterspacing.html suggests 5–12% (which you can spell in CSS as 5% or 0.05em). Ideally you have a font that optimises this itself within the caps, smcp and/or c2sc features.Do not, under any circumstances, set non-zero letter-spacing for body text. It’s just wrong. If you feel your preferred font is too spacious or too tight, fix or replace the font.(If you want another reason: letter-spacing is incompatible with ligatures, not so often used in sans-serif faces, but in serifs things like fi not having the ascender and dot collide messily is often valuable.)
• addedlovely
  Was expecting to see text-wrap:balance there. Solve away your orphans! https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...
• vivzkestrel
  - for a website that talks a lot about web, css your pagination is broken- did you know that https://master.dev/blog/page/65/ onwards till page 70 there is not a single article on any of your pages and yet the pagination keeps going to older posts?- practise what you preach maybe?
• montroser
  I think their heading `box-decoration-mode` is actually meant to be `box-decoration-break`. That's the real property that exists, and is documented on MDN.https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...
• Menu

  sixtyj
  I always tell myself that I should use backwards-compatible CSS only.I vividly remember IE and many hacks to have css elements properly working in it…Imho this is a reason why markdown and other rich-textual formats appeared.Btw is there a some “w3schools” for recent CSS?
• iammrpayments
  At this point I don’t use photoshop anymore, I just make a html document to make the image and then I can easily translate it to 50+ languages
• searchstefano
  CSS has come a long way. On several sites I’ve been able to completely remove JS for things like popups, mobile menus, and open/close interactions.The fact that modern CSS and native browser APIs can handle so much of this makes the web feel simpler and more capable at the same time.