CSS Tips

https://markodenic.com/css-tips/

by qubitcoder • 5 years ago

556 156 5 years ago

markodenic.com

MR4D• 5 years 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.

cosmotic2• 5 years 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• 5 years 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.

TechBro86152• 5 years 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).

pmlnr4• 5 years ago

There are legitimate uses for snap-scrolling

https://shouldiuseacarousel.com/

So... no, there isn't a legitimate use for snap-scrolling. Leave scrolling alone.

ectopod2• 5 years ago

It seems like the theme of the post is "you don't need JavaScript to do this."

Yet you can't see the examples without JavaScript.

elwell3• 5 years ago

How did I know this would be the top comment on HN?

Actually I was thinking the top comment would be something about the site breaking the back button

WORMS_EAT_WORMS4• 5 years 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.

tshaddox2• 5 years 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_WORMS4• 5 years ago

Fantastic article. Learned some things. Well done, loved the read.

Surprisingly most of these have great browser support.

Ancapistani2• 5 years 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.

excitom• 5 years ago

Safari user here: I didn't see any examples that didn't work.

WORMS_EAT_WORMS4• 5 years 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...

not_knuth• 5 years ago

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

Varauk• 5 years 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;
  }

tenaciousDaniel2• 5 years ago

this is my first time seeing the `place-items` property. at first glance I have no idea how it relates to `align-items` or `justify-content`. Feels like the grid API is getting a bit too cumbersome but maybe its just me.

tshaddox2• 5 years ago

place-items is just a shorthand property that takes 2 arguments. The first argument sets the align-items value and the second argument sets the justify-content value. If only one argument is provided (as in this example), it sets both align-items and justify-content to that value.

vsareto• 5 years ago

It's shorthand: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items

MDN also has a list of shorthand properties if someone didn't know what 'shorthand property' really meant: https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_p...

But yeah, the discoverability or suggestion-to-refactor-something-to-shorthand is typically non-existent in CSS. Lists like these are really the only way I discover CSS stuff.

papito2• 5 years ago

I am a backend engineer, but I need to do work on UI for my personal project. This guide from Rachel Andrew on CSS grid and flexbox is superb. She will take you from a n00b to a total Grid Ninja.

https://www.smashingmagazine.com/2020/01/understanding-css-g...

Izkata2• 5 years ago

Don't forget align-content and justify-items !

runarberg5• 5 years ago

If you use PostCSS, postcss-preset-env[1] is pretty neat for reading up on the latest features. E.g. here is the place properties feature[2].

1: https://preset-env.cssdb.org/ 2: https://preset-env.cssdb.org/features#place-properties

6510• 5 years ago

  CENTER{LINE-HEIGHT:100VH}

https://jsfiddle.net/pnyr1u8d/

actually, neither of your versions work without specifying a document height. (or outer container)

  .center {
    display: grid;
    place-items: center;
  }

https://jsfiddle.net/a67gzsjf/

something like this would work

https://jsfiddle.net/a67gzsjf/2/

papito2• 5 years ago

It took us 20 years for a simple way to center items vertically. I mean, COME ON.

tobr2• 5 years ago

It will take another 20 years for people to stop complaining about it retroactively.

sodapopcan7• 5 years ago

Yep, it makes no sense, especially since

  <td valign="middle">

worked flawlessly.

Of course maybe there is some good explanation... I certainly never contributed to the CSS spec.

agumonkey• 5 years ago

that's because half the planet's brain are trying to make printers work

rimliu• 5 years ago

It took half of that. display:table-* have been available for more than ten years already.

asddubs4• 5 years ago

IMO not worth it for the loss of compatibility, since flexbox is just as easy.

runarberg5• 5 years ago

IE compatibility is increasingly rare. Grid is supported by 95% of all browsers globally. If your target group is any narrower, or if centering the content doesn’t break the page and you aren’t shy of serving a weird looking layout to people with old browsers, there is no reason not to use grid.

joshspankit3• 5 years ago

Grid is way better than flexbox. All hail CSS-Grid.

soperj2• 5 years ago

What browser are you even worried about at this point? IE isn't even supported by microsoft any more.

perardi2• 5 years ago

Grid has extremely broad support.

https://caniuse.com/css-grid

The notable exception is IE 11…though even then, with a bit of autoprefixer magic, you may be able to use this.

3dee• 5 years ago

Haven't people been doing this in two lines already?

  .center {
    display: table-cell;
    vertical-align: center;
  }

BiteCode_dev• 5 years 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

PinkPigeon2• 5 years 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-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.

joestrong2• 5 years 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• 5 years 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• 5 years ago

I thought I knew CSS pretty well, but

  position: sticky

is a new one for me.

Tade03• 5 years ago

It's fairly new in general and not widely supported yet:

https://caniuse.com/css-sticky

jorams• 5 years ago

Your link actually shows that it's very widely supported by everything but IE, just with a long standing bug in Blink.

majewsky• 5 years 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.

joshspankit3• 5 years ago

Works on my iOS13 iPad, where there are 4-5 on that page that don’t.

ihaveajob• 5 years ago

I've used it for a few things and once you go beyond the basic examples, it's the wild west. But if you manage to make it work, some things like pricing tables where a section is sticky to the top until the next one pushes it upward, it's really neat.

Yeroc• 5 years ago

Interesting. Now does any browser actually support pgup/pgdown properly? Every time I run across a website that does this it annoys me that paging down doesn't properly account for the height of the stickied header making pgup/pgdown unusable.

nightpool• 5 years ago

The browser can't determine this statically (imagine trying to distinguish between a sticky header that takes up the entire width of the viewport, and a sticky sidebar that doesn't intersect the content at all), but page authors can use the scroll-padding variable to fix this! See https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padd... and https://css-tricks.com/fixed-headers-on-page-links-and-overl...

NightMKoder• 5 years ago

I was researching something similar recently (sticky elements covering anchor scrolling) and there’s a somwhat modern solution to that: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padd... . As usual with new tech though, doesn’t work in Safari (and hence all of iOS) for now. I wonder if the same property could be used to make pgup/pgdown/space work correctly.

elwell3• 5 years ago

Follow-up reading material... IntersectionObserver: https://developers.google.com/web/updates/2017/09/sticky-hea...

hypertele-Xii3• 5 years ago

Sticky headers suffer from one glaring issue: If the page loads to an #anchor position, the sticky header covers up the anchor. Fix:

  window.onload = function()
  {
   var titlebarfixcoverfunction = function()
   {
    if (location.hash.indexOf('#') > -1)
    {
     var titlebar = document.getElementById('title');
     window.scrollBy(0, -titlebar.offsetHeight);
    }
   };
   titlebarfixcoverfunction();
   window.addEventListener('hashchange', titlebarfixcoverfunction);
  }

oneplusone• 5 years ago

Or just use the css property scroll-margin.

lifthrasiir• 5 years ago

You don't even need JS to fix the target scroll: https://stackoverflow.com/questions/10732690/offsetting-an-h...

raspyberr2• 5 years 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.

sandreas• 5 years ago

I miss the push-button and border-triangle trick;)

https://pilabor.com/blog/tricks-you-might-not-know/html-and-...

newsbinator• 5 years ago

That page also has some tips I didn't know.

<a href="#!">

(don't jump to page top on click)

Izkata2• 5 years 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.

vstm• 5 years 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/

system2• 5 years ago

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

pmlnr4• 5 years 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• 5 years 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.

vbernat• 5 years ago

IE 10 has no TLS 1.2 support. I think you can now safely drop it.

dubcanada• 5 years ago

Basically none of this supports IE 10/11 (flexbox one works, calc works, and that's probably about it). Chances are if you see a cool new trick, it doesn't support IE 11.

Chris_Newton2• 5 years ago

I'd love to see a "Can-I-use" browser extension when looking at articles like this.

I agree, though what I would find really helpful is not just can-i-use but should-i-use, taking into account not only feature availability but also quality of implementation. Even if a feature is theoretically supported in all major browsers, it’s not much use for a production site or app if what you actually see on screen in at least one of those browsers looks terrible, for example because of bad anti-aliasing or colour handling or animation calculations. I’ve been building new UI/design systems from scratch for a couple of projects recently, and it’s amazing how often that still happens, even with popular CSS features used to implement relatively simple effects.

nextaccountic• 5 years ago

caniuse.com reports whether something is too buggy to the point of being unusable in a different color, and has footnotes for whether something has some quirks/caveats but is otherwise usable

dshacker• 5 years 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/mi...

PinkPigeon2• 5 years 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• 5 years 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.

TurplePurtle• 5 years 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• 5 years 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• 5 years 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-lin...

Which of course is a consequence of it being widely used before it was a standard forcing other browsers to adopt..

lwansbrough• 5 years 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• 5 years 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• 5 years 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• 5 years ago

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

darepublic• 5 years ago

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

spheroidmethod• 5 years 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.

rchaud2• 5 years ago

Popper.js is required for tooltips in Bootstrap.

runarberg5• 5 years 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/

ArlenBales• 5 years 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.

qubitcoder• 5 years ago

Likewise! That's actually the reason I submitted the article.

memco2• 5 years 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.

rchaud2• 5 years 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• 5 years ago

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

https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-c...

klausjensen• 5 years 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_• 5 years 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.

robertoandred2• 5 years ago

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

breakfastduck• 5 years ago

Also seems to play weird with the go back browser functionality

Zarel• 5 years ago

Can you be more specific? What specific thing breaks? Screen readers?

robertoandred2• 5 years ago

It doesn't trap focus.

jay_kyburz• 5 years ago

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

citrus1330• 5 years ago

I learned some new techniques here! Thanks!

t0t4l• 5 years 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

Heydon Pickering and Andy Bell know what they’re talking about, and they explain the “how and why”

raspyberr2• 5 years ago

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

CSS Tips

Related Stories