13 ms·

CSS Tips

556 points by qubitcoder 5y ago

t0t4l 5y ago
Some good tips in there, thanks for sharing. For anyone looking to really learn CSS for layout the resource I recommend is always https://every-layout.dev https://every-layout.dev Heydon Pickering and Andy Bell know what they’re talking about, and they explain the “how and why”
raspyberr 5y ago
What is codepen.io? Why does this website need to load from a third party to show text...
MR4D 5y ago
This is a nice list of things that are actually useful and surprisingly straightforward to do. Considering how many people (myself included) consider CSS a veritable minefield, I love seeing examples like this.
cosmotic 5y ago
Half these things should be avoided. Don't mess with scroll or scroll bars. If a user wants smooth scroll, they will enable it in their browser. Snappy scroll is unpredictable and disorienting.
- ta9999 5y ago
  Yeah, if there's an alternative with functioning scrollbars people will probably use that instead. It's always surprising how popular screwing with basic UI elements like that always becomes.
- TechBro8615 5y ago
  How did I know this would be the top comment on HN? There are legitimate uses for snap-scrolling, e.g. a horizontal carousel on mobile (or even desktop, depending on implementation), where you want swiping to swipe so the next item is in view. Also, you said half these things should be avoided -- care to list the others? It seems like the theme of the post is "you don't need JavaScript to do this." If some functionality is rarely needed, but does have use cases, it's nice to know that it can be done in CSS without requiring JS (which would be clearly worse).
  - pmlnr 5y ago
    > There are legitimate uses for snap-scrolling https://shouldiuseacarousel.com/ https://shouldiuseacarousel.com/ So... no, there isn't a legitimate use for snap-scrolling. Leave scrolling alone.
    - SamBam 5y ago
      nytimes.com uses horizontal carousel on mobile very well, I feel. It's usually for a group of related stories, it's non-intrusive, uses scrolling instead of buttons, and the next story is always partially-visible, which I think is gold-star UI for letting users know it exists. My understanding is that NY Times spends quite a lot of effort on user metrics, so I would guess, but can't say for sure, that they have evidence that their carousels work.
    - ryanwhitney 5y ago
      There are plenty of uses for snap scrolling and carousels that aren’t rotating hero images. See something like https://airbnb.com https://airbnb.com which uses it for categories a’la the App Store. Image galleries, Netflix-type layouts, etc.
      - lucideer 5y ago
        I'm struggling to see how that is different to "rotating hero images". Is it that it doesn't rotate automatically? What's the UX benefit here? I get that mobile apps use horizontal swiping and some websites want to be app-like, but even in apps the only common horiztonal-swipe pattern I see is the Android hidden menus pattern, which is (a) a subject of debate in UX circles and (b) absolutely nothing like horizontally scrolling item selection, which is still a bad idea even in native mobile apps. The other major example I can think of is Instagram's story circles, which I feel must be intentionally unusable to try and force people to view stories in their full-screen tap-to-advance format.
      - cosmotic 5y ago
        That's a use for sure; though it remains an anti-pattern. Don't mess with the scroll.
- WORMS_EAT_WORMS 5y ago
  > If a user wants smooth scroll, they will enable it in their browser. I really think comments like this aren't helpful and presumptuous to pressing forward. People hate change and love their table layouts... Just going to make a friendly counter argument: - Did you read what this actually does? It's for anchor tags... - Bootstrap 5 uses this by default. - Lot of crappy websites out there. I choose loading one line of CSS versus jQuery + animate all day... - For perspective, almost 100% of every little interaction on native apps are animated these days. It's liked so much by the general population that, some would say, made iOS so appealing in the beginning to take off. People like interaction. - It's possible your opinion does not represent the majority anymore (or even that the HN general opinion). - By making it a browser-defined CSS property versus being JavaScript, you are actually opening accessibility doors for people having this be device configurable. I really think if someone hates it so much or for accessibility reasons, instead they should just disable it in their browser. So literally the opposite of what you said. --- Edit: Example of why this is important to be part of CSS for accessibility versus JavaScript: ``` @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } } ``` or: ``` @media (prefers-reduced-motion) { .animation { animation: none; } :root { scroll-behavior: auto; } } ``` I think HN can chill a bit here.
  - hodder 5y ago
    I dont know anyone who wants scroll to be ruined by a dipshit developer. If anyone fucks with scroll or the back button they honestly have shit for brains when it comes to UX. Honestly if someone has a job in UX and they decide to mess with scroll, they need to be retrained.
    - deleted 5y ago
      [deleted]
    - SamBam 5y ago
      Wow, quite aggressive. How is allowing jump-scrolling in response to clicking "ruining scrolling by a dipshit developer?"
- tshaddox 5y ago
  Which scroll-related tips are you talking about? scroll-behavior: smooth seems to only affect the behavior of clicking named anchor tags. It doesn't seem to change the behavior when scrolling with a mouse wheel or trackpad. Other than general accessibility issues related to animations, I don't see any usability concerns here. scroll-snap-type and scroll-snap-align also don't seem to affect the behavior when scrolling with a mouse wheel or trackpad, except that shortly after you stop scrolling the browser will smoothly scroll to the specified snap points. I suppose this could be over-used (like anything), but it seems to me that there are some pretty obvious places where using this would be entirely appropriate and not unpredictable or disorienting. ::-webkit-scrollbar styling strikes me as the most concerning, both because of how easy and tempting it is to over-use and because the browser support has some subtle gotchas. But this one doesn't seem related to your complaint about smooth versus snappy scrolling.
WORMS_EAT_WORMS 5y ago
Fantastic article. Learned some things. Well done, loved the read. Surprisingly most of these have great browser support.
- Ancapistani 5y ago
  A good number of them either don’t work or are irrelevant on Safari/iPadOS. That’s not to say this is a bad article; it’s not. It’s just that there is more to CSS than “here are some rules and ways of using them you might not have thought of”. That’s the real reason front-end dev and design is as difficult as it is.
  - WORMS_EAT_WORMS 5y ago
    What... Did you even read the article? This isn't true at all. --- Supported Everywhere: - Typing Effect (@keyframes) - Drop Shadow - Smooth Scrolling - "center" (flexbox) - Truncate Text (uses line-camp) - Resize - Modals (uses :target) - calc - Style Empty (:empty) - Position Sticky (minus some table elements in old versions) - Scoll Snap (partial support in even IE) - Dynamic Tooltips (is just pseudo elements...) - Caret color (except old IE) - Fancy Text (uses background clip, so all but old IE) --- Not Supported Everywhere: - Cursors (mobile, obviously...) - ::selection (mobile ignores) - Custom Scrollbars --- I think if you put it side-by-side like this you really see how inaccurate your comment is...
    - Ancapistani 5y ago
      Yes, I read the article - via Safari on my 11” iPad Pro. Things that work: - Typing Effect (@keyframes) - Drop Shadow - "center" (flexbox) - Truncate Text (uses line-camp) - Modals (uses :target) - calc - Style Empty (:empty) - Position Sticky - Scroll Snap - Dynamic Tooltips (when using touchpad) - Fancy Text Things that don’t work: - Smooth Scrolling - Resize - Cursors (even when using the touchpad cursor) - ::selection (even using Safari in “Desktop mode”) - Custom Scrollbars I could test due to not having a live example: - Caret color
    - drdec 5y ago
not_knuth 5y ago
Pretty neat. The scroll snapping makes creating a scrollable image carousel super easy.
Varauk 5y ago
> Easily center anything, horizontally and vertically, with 3 lines of CSS This can actually be done with 2 lines now! .center { display: grid; place-items: center; }
- 3dee 5y ago
  Haven't people been doing this in two lines already? .center { display: table-cell; vertical-align: center; }
- deleted 5y ago
  [deleted]
- BiteCode_dev 5y ago
  I was going to say: "let's now wait 10 years for it to be usable", but then I went to canisuse and wow: 96.01% of availability! https://caniuse.com/?search=grid https://caniuse.com/?search=grid
  - PinkPigeon 5y ago
    Some noteworthy caveats from my experience with CSS grids: - Particularly in Firefox they are much slower. When grids start to pile up on a page, performance goes down the drain - Implicit row-sizing is not really a thing in Safari or iOS -> https://stackoverflow.com/questions/44770074/css-grid-row-height-safari-bug https://stackoverflow.com/questions/44770074/css-grid-row-he... Quote from that SO post: "This is not a Safari bug. It's just a different interpretation of the spec. When dealing with percentage heights, some browsers (like Safari) adhere to the traditional interpretation of the spec, which requires a defined height on the parent. In other words, a percentage height on an in-flow element will be recognized only when the parent has a defined height. Some browsers, such as Chrome and Firefox, have moved past this interpretation and now accept flex and grid heights as an adequate parent reference for a child with a percentage height. But Safari is stuck in the past. This doesn't mean it's wrong, invalid or a bug." Just worth noting, as I had a lot of fun with that one.
- joestrong 5y ago
  I'd argue that `place-content: center` is better than `place-items: center` as it would handle multiple child elements in a way most people would expect from a simple centering snippet. place-content will position all the children to the center, which is generally what's desired here. place-items, would make each child element center itself within its own grid square
jspash 5y ago
I learned something. But would have been better (easier) if the snippets of code only included the css in question and not fonts/backgrounds etc. I had to read each a few times to find the relevant bits.
bradstewart 5y ago
I thought I knew CSS pretty well, but position: sticky is a new one for me.
- raspyberr 5y ago
  Here's a really useful thing to bookmark: javascript:(function()%7B(function%20()%20%7Bvar%20i%2C%20elements%20%3D%20document.querySelectorAll('body%20*')%3Bfor%20(i%20%3D%200%3B%20i%20%3C%20elements.length%3B%20i%2B%2B)%20%7Bif%20(getComputedStyle(elements%5Bi%5D).position%20%3D%3D%3D%20'fixed')%20%7Belements%5Bi%5D.parentNode.removeChild(elements%5Bi%5D)%3B%7D%7D%7D)()%7D)() Click the bookmark and sticky things disappear. Some websites are horrific with how much screen space they take up with sticyky banners. That also of course breaks some sites.
- Tade0 5y ago
  It's fairly new in general and not widely supported yet: https://caniuse.com/css-sticky https://caniuse.com/css-sticky
  - jorams 5y ago
    Your link actually shows that it's very widely supported by everything but IE, just with a long standing bug in Blink.
    - Tade0 5y ago
      Exactly. Full support won't be there until all the marked issues are fixed.
  - majewsky 5y ago
    > It's fairly new in general I used `position:sticky` in a productive website back in 2015, when it was already well-supported in Firefox. What's true is that Chrome only got support for it recently, and since Chrome == the internet nowadays, you will be forgiven for considering it new.
    - 5y ago
sandreas 5y ago
I miss the push-button and border-triangle trick;) https://pilabor.com/blog/tricks-you-might-not-know/html-and-css-tricks/#3d-button-push-effect-for-links https://pilabor.com/blog/tricks-you-might-not-know/html-and-...
- vstm 5y ago
  Hmm the link has changed, here's the new one if anyone else is looking for it: https://pilabor.com/blog/2021/03/html-and-css-tricks/ https://pilabor.com/blog/2021/03/html-and-css-tricks/
- newsbinator 5y ago
  That page also has some tips I didn't know. > <a href="#!"> (don't jump to page top on click)
  - Izkata 5y ago
    It isn't anything special like that, it's trying to jump to an element with id="!" but not finding one. Any gibberish after the # that doesn't match something on the page would work.
system2 5y ago
I stopped adding fancy stuff years ago after realizing browser compatibility has real consequences. :D
- pmlnr 5y ago
  About a year ago I seriously considered rolling everything back on my homepage to HTML 2.0, given that was the last one with an actual RFC, though 4.01 had a decent specification.
vz8 5y ago
I'd love to see a "Can-I-use" browser extension when looking at articles like this. Occasionally a project requires IE 10/11 support (state government work) and it's such a shame to get excited about an impossible CSS approach.
- dshacker 5y ago
  Seems that Microsoft is sunsetting IE11 [1], I wonder if that would nudge the world towards less IE. [1] https://techcommunity.microsoft.com/t5/microsoft-365-blog/microsoft-365-apps-say-farewell-to-internet-explorer-11-and/ba-p/1591666 https://techcommunity.microsoft.com/t5/microsoft-365-blog/mi...
- PinkPigeon 5y ago
  What's everyone's opinion on simply forcing users of IE11 to upgrade / use a different browser? I understand that one should aim for a certain level of backward compatibility, but when does the time come to drop IE11 support for good? Especially as a smaller webdev-shop, how would one even come up with the resources to maintain that level of compatibility? Eventually there is a trade-off where one may end up losing a (hopefully reasonably small) percentage of customers in exchange for focusing on the experience of those customers who are more up to date, but it's a tricky decision to make.
  - detaro 5y ago
    IMHO totally depends on what you are doing and who your users are. Generally going for graceful degradation should keep a lot of stuff usable for outdated browsers, even if not full fidelity/pretty, and that often should be enough. If you have lots of IE11 users for whatever reason (i.e. I believe in some countries rates are a lot higher) it might be worth the effort to make it better for them. If you ship an internal app for a company that rolls out a newer standard browser everywhere, target that.
- deleted 5y ago
  [deleted]
- vbernat 5y ago
TurplePurtle 5y ago
Cool stuff, but wish there was a disclaimer saying many of the things here are Chrome-only. The target audience for this might not consider browser compatibility from the get-go and have to re-think their UI later.
- brundolf 5y ago
  I'm not sure what you mean; I just tested and all of the examples seem to work in Firefox. Many of them rely on features that have come out within the last couple years, but there's a big difference between "modern" and "Chrome-only".
  - matsemann 5y ago
    Some of them are using webkit prefixes, and those only. So it's easy to think they won't work everywhere. But some of those have been added as standard (with the webkit prefix for all browsers), like explained here: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-lin... Which of course is a consequence of it being widely used before it was a standard forcing other browsers to adopt..
lwansbrough 5y ago
One trick that I'm pretty sure I invented is useful in the case where you may be implementing some sort of Material Design palette: you want to use shades of a colour without manually defining them but are losing saturation if you simply use ie. `rgba(255, 255, 255, 0.2)` -- just add `backdrop-filter: saturate(120%)`. This forces the browser renderer to over-saturate the white by mixing in the background colour. Unfortunately Firefox doesn't recognize this CSS property yet but it works fine in WebKit et al.
joemi 5y ago
Interesting, though I would have liked to see the browser support for each of these. Seeing so many -webkit prefixes is a bit concerning.
elliekelly 5y ago
> * Cursors Did you know that you can use your own image, or even emoji as a cursor? This was the very first bit of CSS I ever learned thanks to my first internet friend, Tom.
- all2 5y ago
  I was rather taken by Tom's introduction to scrolling text by way of the marquee tag.
darepublic 5y ago
thanks for the typing tip, I once considered using a jquery lib to do the same
spheroidmethod 5y ago
The tooltip example sounds neat, but that approach will run into problems when your tooltips need to appear near the edges of the viewport. Libraries like popper.js (no affiliation) exist to solve this specific problem.
- rchaud 5y ago
  Popper.js is required for tooltips in Bootstrap.
runarberg 5y ago
Scrollbar styling is arguably a lot easier using the standard CSS-scrollbars-level-1[1] scrollbar-color: rebeccapurple gold; scrollbar-width: thin; As a bonus it works in firefox. 1: https://drafts.csswg.org/css-scrollbars-1/ https://drafts.csswg.org/css-scrollbars-1/
ArlenBales 5y ago
Okay, the ":target" psuedo class just blew my mind. Not necessarily for modals (which I don't particularly like) but I can think of a lot of other uses. Edit - Apparently it's been around for several years. Not sure how I missed this.
- deleted 5y ago
  [deleted]
- qubitcoder 5y ago
  Likewise! That's actually the reason I submitted the article.
- memco 5y ago
  I used it several years ago to create deep links to a list of audio files on the homepage of a site I built. By default the controls were hidden, but if you clicked one of the titles in the list it would show the controls and update the url so you could share a link to that specific item with no JS required.
rchaud 5y ago
Good list, I did not know that text image mask effects were so simple. In fact half of these examples covered things I had no idea about. The custom scrollbars example did not work on Firefox on OSX. all the boxes had identical scrollbars, the OS default.
- frosted-flakes 5y ago
  Firefox only implements the newer standardized scrollbar properties "scrollbar-width" and "scrollbar-color". https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-w... https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-c...
klausjensen 5y ago
What a great post, I learned a lot! I really liked the ones about truncating text - which also taught me what "ellipsis" means. It is the dots in this example: This text is trun...
emmanueloga_ 5y ago
HTML tip: provide an ID to headers so you can link to them directly! :-) Also, provide an anchor so users can just copy the link and not have to inspect the html or use an extension to link to your headers.
robertoandred 5y ago
Don't use their modal trick, it breaks accessibility.
- Zarel 5y ago
  Can you be more specific? What specific thing breaks? Screen readers?
  - robertoandred 5y ago
    It doesn't trap focus.
- breakfastduck 5y ago
  Also seems to play weird with the go back browser functionality
jay_kyburz 5y ago
That custom scrollbar tip doesn't work very well in Firefox :)
citrus1330 5y ago
I learned some new techniques here! Thanks!

556 points by qubitcoder 5y ago

Some good tips in there, thanks for sharing. For anyone looking to really learn CSS for layout the resource I recommend is always https://every-layout.dev https://every-layout.dev Heydon Pickering and Andy Bell know what they’re talking about, and they explain the “how and why”

raspyberr 5y ago

What is codepen.io? Why does this website need to load from a third party to show text...

MR4D 5y ago

This is a nice list of things that are actually useful and surprisingly straightforward to do. Considering how many people (myself included) consider CSS a veritable minefield, I love seeing examples like this.

cosmotic 5y ago

Half these things should be avoided. Don't mess with scroll or scroll bars. If a user wants smooth scroll, they will enable it in their browser. Snappy scroll is unpredictable and disorienting.

ta9999 5y ago
Yeah, if there's an alternative with functioning scrollbars people will probably use that instead. It's always surprising how popular screwing with basic UI elements like that always becomes.
TechBro8615 5y ago
How did I know this would be the top comment on HN? There are legitimate uses for snap-scrolling, e.g. a horizontal carousel on mobile (or even desktop, depending on implementation), where you want swiping to swipe so the next item is in view. Also, you said half these things should be avoided -- care to list the others? It seems like the theme of the post is "you don't need JavaScript to do this." If some functionality is rarely needed, but does have use cases, it's nice to know that it can be done in CSS without requiring JS (which would be clearly worse).
- pmlnr 5y ago
  > There are legitimate uses for snap-scrolling https://shouldiuseacarousel.com/ https://shouldiuseacarousel.com/ So... no, there isn't a legitimate use for snap-scrolling. Leave scrolling alone.
  - SamBam 5y ago
    nytimes.com uses horizontal carousel on mobile very well, I feel. It's usually for a group of related stories, it's non-intrusive, uses scrolling instead of buttons, and the next story is always partially-visible, which I think is gold-star UI for letting users know it exists. My understanding is that NY Times spends quite a lot of effort on user metrics, so I would guess, but can't say for sure, that they have evidence that their carousels work.
  - ryanwhitney 5y ago
    There are plenty of uses for snap scrolling and carousels that aren’t rotating hero images. See something like https://airbnb.com https://airbnb.com which uses it for categories a’la the App Store. Image galleries, Netflix-type layouts, etc.
    - lucideer 5y ago
      I'm struggling to see how that is different to "rotating hero images". Is it that it doesn't rotate automatically? What's the UX benefit here? I get that mobile apps use horizontal swiping and some websites want to be app-like, but even in apps the only common horiztonal-swipe pattern I see is the Android hidden menus pattern, which is (a) a subject of debate in UX circles and (b) absolutely nothing like horizontally scrolling item selection, which is still a bad idea even in native mobile apps. The other major example I can think of is Instagram's story circles, which I feel must be intentionally unusable to try and force people to view stories in their full-screen tap-to-advance format.
    - cosmotic 5y ago
      That's a use for sure; though it remains an anti-pattern. Don't mess with the scroll.
WORMS_EAT_WORMS 5y ago
> If a user wants smooth scroll, they will enable it in their browser. I really think comments like this aren't helpful and presumptuous to pressing forward. People hate change and love their table layouts... Just going to make a friendly counter argument: - Did you read what this actually does? It's for anchor tags... - Bootstrap 5 uses this by default. - Lot of crappy websites out there. I choose loading one line of CSS versus jQuery + animate all day... - For perspective, almost 100% of every little interaction on native apps are animated these days. It's liked so much by the general population that, some would say, made iOS so appealing in the beginning to take off. People like interaction. - It's possible your opinion does not represent the majority anymore (or even that the HN general opinion). - By making it a browser-defined CSS property versus being JavaScript, you are actually opening accessibility doors for people having this be device configurable. I really think if someone hates it so much or for accessibility reasons, instead they should just disable it in their browser. So literally the opposite of what you said. --- Edit: Example of why this is important to be part of CSS for accessibility versus JavaScript: ``` @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } } ``` or: ``` @media (prefers-reduced-motion) { .animation { animation: none; } :root { scroll-behavior: auto; } } ``` I think HN can chill a bit here.
- hodder 5y ago
  I dont know anyone who wants scroll to be ruined by a dipshit developer. If anyone fucks with scroll or the back button they honestly have shit for brains when it comes to UX. Honestly if someone has a job in UX and they decide to mess with scroll, they need to be retrained.
  - deleted 5y ago
    [deleted]
  - SamBam 5y ago
    Wow, quite aggressive. How is allowing jump-scrolling in response to clicking "ruining scrolling by a dipshit developer?"
tshaddox 5y ago
Which scroll-related tips are you talking about? scroll-behavior: smooth seems to only affect the behavior of clicking named anchor tags. It doesn't seem to change the behavior when scrolling with a mouse wheel or trackpad. Other than general accessibility issues related to animations, I don't see any usability concerns here. scroll-snap-type and scroll-snap-align also don't seem to affect the behavior when scrolling with a mouse wheel or trackpad, except that shortly after you stop scrolling the browser will smoothly scroll to the specified snap points. I suppose this could be over-used (like anything), but it seems to me that there are some pretty obvious places where using this would be entirely appropriate and not unpredictable or disorienting. ::-webkit-scrollbar styling strikes me as the most concerning, both because of how easy and tempting it is to over-use and because the browser support has some subtle gotchas. But this one doesn't seem related to your complaint about smooth versus snappy scrolling.

WORMS_EAT_WORMS 5y ago

Fantastic article. Learned some things. Well done, loved the read. Surprisingly most of these have great browser support.

Ancapistani 5y ago
A good number of them either don’t work or are irrelevant on Safari/iPadOS. That’s not to say this is a bad article; it’s not. It’s just that there is more to CSS than “here are some rules and ways of using them you might not have thought of”. That’s the real reason front-end dev and design is as difficult as it is.
- WORMS_EAT_WORMS 5y ago
  What... Did you even read the article? This isn't true at all. --- Supported Everywhere: - Typing Effect (@keyframes) - Drop Shadow - Smooth Scrolling - "center" (flexbox) - Truncate Text (uses line-camp) - Resize - Modals (uses :target) - calc - Style Empty (:empty) - Position Sticky (minus some table elements in old versions) - Scoll Snap (partial support in even IE) - Dynamic Tooltips (is just pseudo elements...) - Caret color (except old IE) - Fancy Text (uses background clip, so all but old IE) --- Not Supported Everywhere: - Cursors (mobile, obviously...) - ::selection (mobile ignores) - Custom Scrollbars --- I think if you put it side-by-side like this you really see how inaccurate your comment is...
  - Ancapistani 5y ago
    Yes, I read the article - via Safari on my 11” iPad Pro. Things that work: - Typing Effect (@keyframes) - Drop Shadow - "center" (flexbox) - Truncate Text (uses line-camp) - Modals (uses :target) - calc - Style Empty (:empty) - Position Sticky - Scroll Snap - Dynamic Tooltips (when using touchpad) - Fancy Text Things that don’t work: - Smooth Scrolling - Resize - Cursors (even when using the touchpad cursor) - ::selection (even using Safari in “Desktop mode”) - Custom Scrollbars I could test due to not having a live example: - Caret color
  - drdec 5y ago

not_knuth 5y ago

Pretty neat. The scroll snapping makes creating a scrollable image carousel super easy.

Varauk 5y ago

> Easily center anything, horizontally and vertically, with 3 lines of CSS This can actually be done with 2 lines now! .center { display: grid; place-items: center; }

3dee 5y ago
Haven't people been doing this in two lines already? .center { display: table-cell; vertical-align: center; }
deleted 5y ago
[deleted]
BiteCode_dev 5y ago
I was going to say: "let's now wait 10 years for it to be usable", but then I went to canisuse and wow: 96.01% of availability! https://caniuse.com/?search=grid https://caniuse.com/?search=grid
- PinkPigeon 5y ago
  Some noteworthy caveats from my experience with CSS grids: - Particularly in Firefox they are much slower. When grids start to pile up on a page, performance goes down the drain - Implicit row-sizing is not really a thing in Safari or iOS -> https://stackoverflow.com/questions/44770074/css-grid-row-height-safari-bug https://stackoverflow.com/questions/44770074/css-grid-row-he... Quote from that SO post: "This is not a Safari bug. It's just a different interpretation of the spec. When dealing with percentage heights, some browsers (like Safari) adhere to the traditional interpretation of the spec, which requires a defined height on the parent. In other words, a percentage height on an in-flow element will be recognized only when the parent has a defined height. Some browsers, such as Chrome and Firefox, have moved past this interpretation and now accept flex and grid heights as an adequate parent reference for a child with a percentage height. But Safari is stuck in the past. This doesn't mean it's wrong, invalid or a bug." Just worth noting, as I had a lot of fun with that one.
joestrong 5y ago
I'd argue that `place-content: center` is better than `place-items: center` as it would handle multiple child elements in a way most people would expect from a simple centering snippet. place-content will position all the children to the center, which is generally what's desired here. place-items, would make each child element center itself within its own grid square

jspash 5y ago

I learned something. But would have been better (easier) if the snippets of code only included the css in question and not fonts/backgrounds etc. I had to read each a few times to find the relevant bits.

bradstewart 5y ago

I thought I knew CSS pretty well, but position: sticky is a new one for me.

raspyberr 5y ago
Here's a really useful thing to bookmark: javascript:(function()%7B(function%20()%20%7Bvar%20i%2C%20elements%20%3D%20document.querySelectorAll('body%20*')%3Bfor%20(i%20%3D%200%3B%20i%20%3C%20elements.length%3B%20i%2B%2B)%20%7Bif%20(getComputedStyle(elements%5Bi%5D).position%20%3D%3D%3D%20'fixed')%20%7Belements%5Bi%5D.parentNode.removeChild(elements%5Bi%5D)%3B%7D%7D%7D)()%7D)() Click the bookmark and sticky things disappear. Some websites are horrific with how much screen space they take up with sticyky banners. That also of course breaks some sites.
Tade0 5y ago
It's fairly new in general and not widely supported yet: https://caniuse.com/css-sticky https://caniuse.com/css-sticky
- jorams 5y ago
  Your link actually shows that it's very widely supported by everything but IE, just with a long standing bug in Blink.
  - Tade0 5y ago
    Exactly. Full support won't be there until all the marked issues are fixed.
- majewsky 5y ago
  > It's fairly new in general I used `position:sticky` in a productive website back in 2015, when it was already well-supported in Firefox. What's true is that Chrome only got support for it recently, and since Chrome == the internet nowadays, you will be forgiven for considering it new.
  - 5y ago

sandreas 5y ago

I miss the push-button and border-triangle trick;) https://pilabor.com/blog/tricks-you-might-not-know/html-and-css-tricks/#3d-button-push-effect-for-links https://pilabor.com/blog/tricks-you-might-not-know/html-and-...

vstm 5y ago
Hmm the link has changed, here's the new one if anyone else is looking for it: https://pilabor.com/blog/2021/03/html-and-css-tricks/ https://pilabor.com/blog/2021/03/html-and-css-tricks/
newsbinator 5y ago
That page also has some tips I didn't know. > <a href="#!"> (don't jump to page top on click)
- Izkata 5y ago
  It isn't anything special like that, it's trying to jump to an element with id="!" but not finding one. Any gibberish after the # that doesn't match something on the page would work.

system2 5y ago

I stopped adding fancy stuff years ago after realizing browser compatibility has real consequences. :D

pmlnr 5y ago
About a year ago I seriously considered rolling everything back on my homepage to HTML 2.0, given that was the last one with an actual RFC, though 4.01 had a decent specification.

vz8 5y ago

I'd love to see a "Can-I-use" browser extension when looking at articles like this. Occasionally a project requires IE 10/11 support (state government work) and it's such a shame to get excited about an impossible CSS approach.

dshacker 5y ago
Seems that Microsoft is sunsetting IE11 [1], I wonder if that would nudge the world towards less IE. [1] https://techcommunity.microsoft.com/t5/microsoft-365-blog/microsoft-365-apps-say-farewell-to-internet-explorer-11-and/ba-p/1591666 https://techcommunity.microsoft.com/t5/microsoft-365-blog/mi...
PinkPigeon 5y ago
What's everyone's opinion on simply forcing users of IE11 to upgrade / use a different browser? I understand that one should aim for a certain level of backward compatibility, but when does the time come to drop IE11 support for good? Especially as a smaller webdev-shop, how would one even come up with the resources to maintain that level of compatibility? Eventually there is a trade-off where one may end up losing a (hopefully reasonably small) percentage of customers in exchange for focusing on the experience of those customers who are more up to date, but it's a tricky decision to make.
- detaro 5y ago
  IMHO totally depends on what you are doing and who your users are. Generally going for graceful degradation should keep a lot of stuff usable for outdated browsers, even if not full fidelity/pretty, and that often should be enough. If you have lots of IE11 users for whatever reason (i.e. I believe in some countries rates are a lot higher) it might be worth the effort to make it better for them. If you ship an internal app for a company that rolls out a newer standard browser everywhere, target that.
deleted 5y ago
[deleted]
vbernat 5y ago

TurplePurtle 5y ago

Cool stuff, but wish there was a disclaimer saying many of the things here are Chrome-only. The target audience for this might not consider browser compatibility from the get-go and have to re-think their UI later.

brundolf 5y ago
I'm not sure what you mean; I just tested and all of the examples seem to work in Firefox. Many of them rely on features that have come out within the last couple years, but there's a big difference between "modern" and "Chrome-only".
- matsemann 5y ago
  Some of them are using webkit prefixes, and those only. So it's easy to think they won't work everywhere. But some of those have been added as standard (with the webkit prefix for all browsers), like explained here: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-lin... Which of course is a consequence of it being widely used before it was a standard forcing other browsers to adopt..

lwansbrough 5y ago

One trick that I'm pretty sure I invented is useful in the case where you may be implementing some sort of Material Design palette: you want to use shades of a colour without manually defining them but are losing saturation if you simply use ie. `rgba(255, 255, 255, 0.2)` -- just add `backdrop-filter: saturate(120%)`. This forces the browser renderer to over-saturate the white by mixing in the background colour. Unfortunately Firefox doesn't recognize this CSS property yet but it works fine in WebKit et al.

joemi 5y ago

Interesting, though I would have liked to see the browser support for each of these. Seeing so many -webkit prefixes is a bit concerning.

elliekelly 5y ago

> * Cursors Did you know that you can use your own image, or even emoji as a cursor? This was the very first bit of CSS I ever learned thanks to my first internet friend, Tom.

all2 5y ago
I was rather taken by Tom's introduction to scrolling text by way of the marquee tag.

darepublic 5y ago

thanks for the typing tip, I once considered using a jquery lib to do the same

spheroidmethod 5y ago

The tooltip example sounds neat, but that approach will run into problems when your tooltips need to appear near the edges of the viewport. Libraries like popper.js (no affiliation) exist to solve this specific problem.

rchaud 5y ago
Popper.js is required for tooltips in Bootstrap.

runarberg 5y ago

Scrollbar styling is arguably a lot easier using the standard CSS-scrollbars-level-1[1] scrollbar-color: rebeccapurple gold; scrollbar-width: thin; As a bonus it works in firefox. 1: https://drafts.csswg.org/css-scrollbars-1/ https://drafts.csswg.org/css-scrollbars-1/

ArlenBales 5y ago

Okay, the ":target" psuedo class just blew my mind. Not necessarily for modals (which I don't particularly like) but I can think of a lot of other uses. Edit - Apparently it's been around for several years. Not sure how I missed this.

deleted 5y ago
[deleted]
qubitcoder 5y ago
Likewise! That's actually the reason I submitted the article.
memco 5y ago
I used it several years ago to create deep links to a list of audio files on the homepage of a site I built. By default the controls were hidden, but if you clicked one of the titles in the list it would show the controls and update the url so you could share a link to that specific item with no JS required.

rchaud 5y ago

Good list, I did not know that text image mask effects were so simple. In fact half of these examples covered things I had no idea about. The custom scrollbars example did not work on Firefox on OSX. all the boxes had identical scrollbars, the OS default.

frosted-flakes 5y ago
Firefox only implements the newer standardized scrollbar properties "scrollbar-width" and "scrollbar-color". https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-w... https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-c...

klausjensen 5y ago

What a great post, I learned a lot! I really liked the ones about truncating text - which also taught me what "ellipsis" means. It is the dots in this example: This text is trun...

emmanueloga_ 5y ago

HTML tip: provide an ID to headers so you can link to them directly! :-) Also, provide an anchor so users can just copy the link and not have to inspect the html or use an extension to link to your headers.

robertoandred 5y ago

Don't use their modal trick, it breaks accessibility.

Zarel 5y ago
Can you be more specific? What specific thing breaks? Screen readers?
- robertoandred 5y ago
  It doesn't trap focus.
breakfastduck 5y ago
Also seems to play weird with the go back browser functionality

jay_kyburz 5y ago

That custom scrollbar tip doesn't work very well in Firefox :)

citrus1330 5y ago

I learned some new techniques here! Thanks!