Hacker Read

echelon · 2019-10-22 15:36:02

These look standard. Chrome already implements them:

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decora...

reply

ecuaflo | karma 124 | avg karma 1.43 · | 2024-04-25 16:34:02

I am a frontend dev and agree it could be done with CSS similar to this [0]

[0] https://codepen.io/jh3y/pen/oNqdmbW

reply

onetom | karma 218 | avg karma 1.08 · | 2023-06-15 11:10:51

it can be done in pure CSS these days: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...

kej | karma 2370 | avg karma 3.31 · | 2019-04-07 16:30:21

This reminds me of picnic.css [0], which uses the same technique of styling everything nicely by default, but adds some options for changing things when you want.

[0] https://picnicss.com/

reply

city41 | karma 10113 | avg karma 3.53 · | 2021-05-12 18:31:48+00:00

There are primitives like that, such as https://developer.mozilla.org/en-US/docs/Web/HTML/Element/in...

There's even a color picker in native html now.

reply

robin_reala | karma 63921 | avg karma 9.98 · | 2024-06-27 09:56:06

Nothing but Chromiums support this, but it should be happening in the not too distant future: https://caniuse.com/css-anchor-positioning

enhdless | karma 154 | avg karma 2.14 · | 2020-08-27 01:07:38

Cool! A while ago I was experimenting with something like this but using CSS text-shadow instead: https://codepen.io/enhdless/pen/NYMpEw

vetinari | karma 8298 | avg karma 1.82 · | 2016-11-12 19:40:18+00:00

You may want to have a look into CSS @apply - https://tabatkins.github.io/specs/css-apply-rule/ (currently supported only in Chrome trough).

handoflixue | karma 835 | avg karma 2.76 · | 2021-06-04 18:12:49

Firefox Color should let you customize those: https://color.firefox.com/

somishere | karma 491 | avg karma 1.29 · | 2023-06-24 05:22:35

Very simple CSS only example, including JS-free toggling:

https://codepen.io/theprojectsomething/pen/oNQYqRw

Note: Could be simplified with the :has selector but it isn't currently supported in Firefox.

reply

jpc0 | karma | avg karma · | 2023-06-24 04:05:59

Ain't there yet but soon we should be able to do this without CSS

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/me...

reply

jonnyscholes | karma 451 | avg karma 5.24 · | 2017-12-29 22:07:29+00:00

CSS grid can do this! Sure not as freedom as a JS implementation but its good enough in 95% of scenarios in my experience! https://codepen.io/balazs_sziklai/pen/mOwoLg (not my code - just one of the examples on codepen)

rpwverheij | karma 96 | avg karma 0.83 · | 2012-06-04 08:33:38

take a look at LESS CSS. It does exactly this and more. http://lesscss.org/

rootlocus | karma 2736 | avg karma 2.61 · | 2020-01-17 19:50:53

Even better: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...

matthewmacleod | karma 17455 | avg karma 4.64 · | 2017-03-02 04:44:21

The CSS text module has some support for various text manipulations (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text) but it's obviously not quite as extensive as LaTeX or InDesign or whatever.

martinbaun | karma 178 | avg karma 0.95 · | 2024-06-13 15:02:36

There is https://v0.dev/ from Vercel, but I think this is a too complicated problem to be solved right now by AI.

CSS seems like an intractable problem in general.

reply

cageface | karma 19013 | avg karma 3.78 · | 2019-02-18 15:45:50

You can do this with styled-components in react too.

https://www.styled-components.com/

reply

ldd | karma 464 | avg karma 3.18 · | 2020-05-15 20:07:52

I replied to the top post, but just in case, here is my idea

It uses prefers-color-scheme and 28 lines of CSS:

https://pastebin.com/4JYbSi5F

reply

DZittersteyn | karma | avg karma · | 2014-01-22 15:15:40+00:00

You could also use Font Awesome for something similar: http://jsfiddle.net/sv8Lm/

tomaskafka | karma 1679 | avg karma 2.48 · | 2012-05-17 14:22:22+00:00

Hi erable, I can show you a sample CSS generated by current version: http://jsfiddle.net/tomaskafka/ZXgqN/