15 ms·

Trigonometric Functions in CSS

119 points by itsuka 4y ago

andix 4y ago
The only question i have left for the Chrome CSS engine: does it run doom?
- chatmasta 4y ago
  I couldn't find any example of running doom without JavaScript involved, but here's Mario Kart in pure CSS: https://codesandbox.io/s/zk15o120xl https://codesandbox.io/s/zk15o120xl
RobotToaster 4y ago
So is CSS Turing complete yet?
- hajile 4y ago
  I believe that was shown in 2011 (though as this follow-up states, there was a slight mistake that needed to be corrected). https://accodeing.com/blog/2015/css3-proven-to-be-turing-complete https://accodeing.com/blog/2015/css3-proven-to-be-turing-com...
progx 4y ago
Soon we can forget SVG.
deleted 4y ago
[deleted]
padolsey 4y ago
We've come a long way from `progid:DXImageTransform.Microsoft.BasicImage(rotation=2)`. It's really wonderful to see.
- _the_inflator 4y ago
  Rings a bell. IE 6 and IE 8. Still nightmarish after all these years. ;)
dmitrygr 4y ago
Well, now that we have this... your code golf assignment, should you choose to accept it: a webassmebly interpreter written entirely in CSS.
- quickthrower2 4y ago
  harder: a css engine in webassembly
jibbit 4y ago
I'm bombarded with info on cool css i can't use. I'm badly missing defacto CSS documentation for (only) the subset i can. Same for JS, tbh.
- develatio 4y ago
  You can always check https://caniuse.com https://caniuse.com in order to check what CSS/JS features are supported by a matrix of browsers/versions.
  - agos 4y ago
    this is very useful but does not solve the problem of discovering new stuff
    - chatmasta 4y ago
      You can sort by publication date, e.g.: https://caniuse.com/?cats=CSS&statuses=all https://caniuse.com/?cats=CSS&statuses=all
  - jibbit 4y ago
    Sure, this is what i do - i guess i would prefer https://youcanuse.com https://youcanuse.com
noelwelsh 4y ago
It would have been cool if, some 20 years ago, the CSS designers had realized they were designing a programming language and started on that basis. Instead we get mostly adhoc extensions slowly adding these features over decades.
- tannhaeuser 4y ago
  CSS has been a job security/browser lock-in club for the longest time. It's one of the last areas of influence W3C (now W3C, Inc.) has over web standardization, with Google paying and pulling the strings, their other puppet being a loose group of individuals having a long term investment in writing web specs on github called whatwg. There is/was the Houdini API proposal as a way to plug JavaScript into CSS low-level layout already rather than invent a thousand microsyntaxes for CSS equivalents of programming language constructs such as CSS custom properties, calc(), trigonometric functions, degenerative uses of media queries, and other crap. The idea being to return to reasonable coverage for document presentation, and an extension API for web apps (as opposed to sites) requiring JavaScript anyway as a 80/20 trade-off. But any notion of mental discipline is lost on CSS heads really. It already starts with the very invention of CSS as a redundant syntax for markup attributes, then declaring an unsound structure/presentation dichotomy as a syntactic feature after the fact. A plausible explanation for CSS absurdity might be that evolution of HTML the markup language was organizationally blocked so many years that everything around it had to cater for its stagnancy and ossification. Even the inventor of CSS had opposed against custom properties already, formally questioning their necessity.
  - chatmasta 4y ago
    "Job security" seems like an unfair way to describe backwards compatibility. Most of the quirks of the Web platform are due to it having some of the strictest backwards compatibility standards of any software. For the most part, you can view a GeoCities site from 2005 in the latest Chrome browser and it will render the same as it did 18 years ago, assuming all the assets are still loadable. IMO, the Web as a platform has done a great job maintaining this standard, and it's only been in recent years that all the browsers became "evergreen" and are able to add new changes at a rapid pace. I definitely wouldn't hold this against the people responsible for maintaining (!) the CSS spec. Now, should there be some entirely new design language that starts fresh without any of these assumptions, and free from technical debt? Well, maybe, but then again that's kind of what each new version of the CSS spec does when it introduces new rules, which is much easier now with all browsers evergreen. (edited to replace "green field" with "evergreen")
qrios 4y ago
The animation examples have an significant impact on CPU and GPU usage. On a i7 CPU the overall utilization is going 10%+ and both GPUs are used 30% more. Different browsers have a different footprint. But at least the plus only happens if the animation is visible.
eurasiantiger 4y ago
So now it’s possible to do raytracing in CSS. What a world we live in!
carlsborg 4y ago
The "watch me code this" button on the infinite mobius strip video on the bottom links to a prolific css effects tutorial creator [1] [1] https://www.youtube.com/@anatudor/videos https://www.youtube.com/@anatudor/videos

119 points by itsuka 4y ago

andix 4y ago

The only question i have left for the Chrome CSS engine: does it run doom?

chatmasta 4y ago
I couldn't find any example of running doom without JavaScript involved, but here's Mario Kart in pure CSS: https://codesandbox.io/s/zk15o120xl https://codesandbox.io/s/zk15o120xl

RobotToaster 4y ago

So is CSS Turing complete yet?

hajile 4y ago
I believe that was shown in 2011 (though as this follow-up states, there was a slight mistake that needed to be corrected). https://accodeing.com/blog/2015/css3-proven-to-be-turing-complete https://accodeing.com/blog/2015/css3-proven-to-be-turing-com...

progx 4y ago

Soon we can forget SVG.

deleted 4y ago

[deleted]

padolsey 4y ago

We've come a long way from `progid:DXImageTransform.Microsoft.BasicImage(rotation=2)`. It's really wonderful to see.

_the_inflator 4y ago
Rings a bell. IE 6 and IE 8. Still nightmarish after all these years. ;)

dmitrygr 4y ago

Well, now that we have this... your code golf assignment, should you choose to accept it: a webassmebly interpreter written entirely in CSS.

quickthrower2 4y ago
harder: a css engine in webassembly

jibbit 4y ago

I'm bombarded with info on cool css i can't use. I'm badly missing defacto CSS documentation for (only) the subset i can. Same for JS, tbh.

develatio 4y ago
You can always check https://caniuse.com https://caniuse.com in order to check what CSS/JS features are supported by a matrix of browsers/versions.
- agos 4y ago
  this is very useful but does not solve the problem of discovering new stuff
  - chatmasta 4y ago
    You can sort by publication date, e.g.: https://caniuse.com/?cats=CSS&statuses=all https://caniuse.com/?cats=CSS&statuses=all
- jibbit 4y ago
  Sure, this is what i do - i guess i would prefer https://youcanuse.com https://youcanuse.com

noelwelsh 4y ago

It would have been cool if, some 20 years ago, the CSS designers had realized they were designing a programming language and started on that basis. Instead we get mostly adhoc extensions slowly adding these features over decades.

tannhaeuser 4y ago
CSS has been a job security/browser lock-in club for the longest time. It's one of the last areas of influence W3C (now W3C, Inc.) has over web standardization, with Google paying and pulling the strings, their other puppet being a loose group of individuals having a long term investment in writing web specs on github called whatwg. There is/was the Houdini API proposal as a way to plug JavaScript into CSS low-level layout already rather than invent a thousand microsyntaxes for CSS equivalents of programming language constructs such as CSS custom properties, calc(), trigonometric functions, degenerative uses of media queries, and other crap. The idea being to return to reasonable coverage for document presentation, and an extension API for web apps (as opposed to sites) requiring JavaScript anyway as a 80/20 trade-off. But any notion of mental discipline is lost on CSS heads really. It already starts with the very invention of CSS as a redundant syntax for markup attributes, then declaring an unsound structure/presentation dichotomy as a syntactic feature after the fact. A plausible explanation for CSS absurdity might be that evolution of HTML the markup language was organizationally blocked so many years that everything around it had to cater for its stagnancy and ossification. Even the inventor of CSS had opposed against custom properties already, formally questioning their necessity.
- chatmasta 4y ago
  "Job security" seems like an unfair way to describe backwards compatibility. Most of the quirks of the Web platform are due to it having some of the strictest backwards compatibility standards of any software. For the most part, you can view a GeoCities site from 2005 in the latest Chrome browser and it will render the same as it did 18 years ago, assuming all the assets are still loadable. IMO, the Web as a platform has done a great job maintaining this standard, and it's only been in recent years that all the browsers became "evergreen" and are able to add new changes at a rapid pace. I definitely wouldn't hold this against the people responsible for maintaining (!) the CSS spec. Now, should there be some entirely new design language that starts fresh without any of these assumptions, and free from technical debt? Well, maybe, but then again that's kind of what each new version of the CSS spec does when it introduces new rules, which is much easier now with all browsers evergreen. (edited to replace "green field" with "evergreen")

qrios 4y ago

The animation examples have an significant impact on CPU and GPU usage. On a i7 CPU the overall utilization is going 10%+ and both GPUs are used 30% more. Different browsers have a different footprint. But at least the plus only happens if the animation is visible.

eurasiantiger 4y ago

So now it’s possible to do raytracing in CSS. What a world we live in!

carlsborg 4y ago

The "watch me code this" button on the infinite mobius strip video on the bottom links to a prolific css effects tutorial creator [1] [1] https://www.youtube.com/@anatudor/videos https://www.youtube.com/@anatudor/videos