CSS Tips

[Varauk]

> 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;
  }

[papito]

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

[tenaciousDaniel]

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.

[asddubs]

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

[BiteCode_dev]

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

[joestrong]

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

[3dee]

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

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

[6510]

  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/

[vz8]

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.

[Chris_Newton]

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.

[vbernat]

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

[PinkPigeon]

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.

[dubcanada]

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.

[dshacker]

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...

[elliekelly]

> * 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]

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

[spheroidmethod]

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]

Popper.js is required for tooltips in Bootstrap.

[jspash]

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.

[ArlenBales]

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]

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

[memco]

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.

[emmanueloga_]

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.

[MR4D]

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.

[runarberg]

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/

[bradstewart]

I thought I knew CSS pretty well, but

  position: sticky

is a new one for me.

[hypertele-Xii]

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);
  }

[elwell]

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

[ihaveajob]

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.

[raspyberr]

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.

[Yeroc]

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.

[Tade0]

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

https://caniuse.com/css-sticky

[not_knuth]

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

[WORMS_EAT_WORMS]

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

Surprisingly most of these have great browser support.

[Ancapistani]

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.

[sandreas]

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

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

[system2]

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

[TurplePurtle]

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.

[robertoandred]

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

[jay_kyburz]

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

[cosmotic]

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.

[rchaud]

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.

[klausjensen]

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...