Wow, the simplicity of this is blowing my mind.
I don't think I have ever even considered using `white-space: pre` with generated content. Really fun, really cool!
Show HN: Laptop.css
11–20 of 38 posts
Re: Show HN: Laptop.css
#12Adding an animated image of Steve Balmer and Bill Gates dancing at the Windows 95 launch is guaranteed to get an extra 10 points on Hacker News. It's just science.
Re: Show HN: Laptop.css
#13:root { --laptop-content: ... Huh. Interesting that I never noticed that CSS supported variables like this. I haven't worked on a Web front-end for some time, but I see that this has been pretty portable since late 2017. I remember that one of the big points of using CSS preprocessors like Sass was being able to use variables. Now, it seems they're a little less useful.
That's new to me too. For others curious, here's the developer.mozilla.org page on it:
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_c...
And the CanIUse table:
https://caniuse.com/#feat=css-variables
I look forward to starting to use this in 2024.
Re: Show HN: Laptop.css
#14:root { --laptop-content: ... Huh. Interesting that I never noticed that CSS supported variables like this. I haven't worked on a Web front-end for some time, but I see that this has been pretty portable since late 2017. I remember that one of the big points of using CSS preprocessors like Sass was being able to use variables. Now, it seems they're a little less useful.
And unlike preprocessor variables, they: 1) Cascade (follow inheritance through the DOM) 2) Can be changed at runtime for things like toggling a dark theme Preprocessors are still useful for other things, though. My #1 reason for using them is nested selectors, which for reasons I cannot understand haven't made it into native CSS yet.
> nested selectors, which for reasons I cannot understand haven't made it into native CSS yet.
As I understand it, browsers don't look at a selector and navigate, but rather go node by node and see what selectors match. Having complex selectors that require looking at parents and siblings is worse, performance-wise, than having a simple selector. I imagine nested selectors don't make it into CSS, because people don't want to further encourage the use of complex selectors.
Here, this is where I read about that:
https://web.archive.org/web/20150304005354/https://developer...
Re: Show HN: Laptop.css
#15:root { --laptop-content: ... Huh. Interesting that I never noticed that CSS supported variables like this. I haven't worked on a Web front-end for some time, but I see that this has been pretty portable since late 2017. I remember that one of the big points of using CSS preprocessors like Sass was being able to use variables. Now, it seems they're a little less useful.
Sadly not portable enough if you need to support IE. Give it a few more years though.
Does frontend developers care?
It seems to me a lot of frontend developers has a hard time wrapping their head around the fact that there exist millions of users who prefer other browsers than Chrome :-/
Full disclosure: I sometimes work on frontend myself, I have talked to such developers.
Re: Show HN: Laptop.css
#16Jokes aside - and I absolutely love this - is there actually a good (S)CSS library, with freely-licensed configurable template imagery, that lets you say "I want this image to be displayed as the screen of an high-resolution photograph of a MacBook/iPad/whatever, sized so that the photograph of the device itself itself fills its container?" It's surprisingly hard to find, and I recently had to roll my own, transparen…
I also recently built something in this vein... It's a library that will automatically screenshot a page and put it in one of those device frames...
The idea is you can use it as part of your test / build process to generate deterministic(ish) image assets...
Re: Show HN: Laptop.css
#17:root { --laptop-content: ... Huh. Interesting that I never noticed that CSS supported variables like this. I haven't worked on a Web front-end for some time, but I see that this has been pretty portable since late 2017. I remember that one of the big points of using CSS preprocessors like Sass was being able to use variables. Now, it seems they're a little less useful.
That's new to me too. For others curious, here's the developer.mozilla.org page on it: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_c... And the CanIUse table: https://caniuse.com/#feat=css-variables I look forward to starting to use this in 2024.
The caniuse site itself doesn’t properly work on my modern updated iPhone. The modals won’t go away. If a modal appears and it’s hidden behind the footer, I can’t read the rest of it. Yet it seems to be a site widely used and referenced.
Along with the 90%+ prevalence of it working on browsers, isn’t the joke mostly moot? Besides Chinese browsers and old IE/Edge, support seems to be fine. I don’t know exactly what Microsoft is doing with Edge Chromium on Windows 7/8, but if that’s pushed through more, the support is essentially universal if you’re not targeting the two Chinese focused browsers.
Re: Show HN: Laptop.css
#18Jokes aside - and I absolutely love this - is there actually a good (S)CSS library, with freely-licensed configurable template imagery, that lets you say "I want this image to be displayed as the screen of an high-resolution photograph of a MacBook/iPad/whatever, sized so that the photograph of the device itself itself fills its container?" It's surprisingly hard to find, and I recently had to roll my own, transparen…
This doesn't answer your question with regards to devices, but for screenshots involving browsers, I believe that Screely is the best/fastest/easiest thing out there to use.
Re: Show HN: Laptop.css
#19Earlier quoted context omitted.
That's new to me too. For others curious, here's the developer.mozilla.org page on it: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_c... And the CanIUse table: https://caniuse.com/#feat=css-variables I look forward to starting to use this in 2024.
The caniuse site itself doesn’t properly work on my modern updated iPhone. The modals won’t go away. If a modal appears and it’s hidden behind the footer, I can’t read the rest of it. Yet it seems to be a site widely used and referenced. Along with the 90%+ prevalence of it working on browsers, isn’t the joke mostly moot? Besides Chinese browsers and old IE/Edge, support seems to be fine. I don’t know exactly what Mi…
This is a problem specific to your iPhone — perhaps an over-zealous content blocker? If you can figure out what's different from a clean install, report it at https://github.com/Fyrd/caniuse/issues.
Re: Show HN: Laptop.css
#20:root { --laptop-content: ... Huh. Interesting that I never noticed that CSS supported variables like this. I haven't worked on a Web front-end for some time, but I see that this has been pretty portable since late 2017. I remember that one of the big points of using CSS preprocessors like Sass was being able to use variables. Now, it seems they're a little less useful.
Sadly not portable enough if you need to support IE. Give it a few more years though.
[deleted]