DEV Community

4 CSS tricks that will get you dirty looks from other developers

Cyd on January 10, 2020

Dirty tricks in CSS are very useful; where would YouTube players be without using padding–bottom: 56.25% to create a 16:9 ratio? I assembled a list...
Collapse
 
gabbersepp profile image
Josef Biehler

Nice. Did not know the trick to expand the clickable area!

Collapse
 
cydstumpel profile image
Cyd

It's my favourite thing, so useful!

Collapse
 
salvan13 profile image
Antonio Salvati 🦊 • Edited

Nice trick!
btw I'd avoid to overlap other texts otherwise they become unselectable

Thread Thread
 
cydstumpel profile image
Cyd

True! This is a big downside to using before

Thread Thread
 
salvan13 profile image
Antonio Salvati 🦊 • Edited

In that case maybe it's better to wrap the whole element in a a tag :)

Thread Thread
 
5t3ph profile image
Stephanie Eckles

You can also use a container around selectable text and set it to position: relative: z-index: 1 to bring it above the link click area ;) It removes the text from being part of the click area but I would suggest selectable text is a higher priority and you still get the benefit of the rest of the card becoming clickable.

Collapse
 
kurtextrem profile image
Jacob "kurtextrem" Groß • Edited

Be careful with "trick 2". It makes it harder to select the text (you can only copy it if you select from the outside, not in the usual style of having the cursor on top of the word you want to select).

Collapse
 
waterlink profile image
Alex Fedorov

Thank you for the article! It's right on time as I will need to use 2 point today to extend clickable area of the button to the whole parent element.

Collapse
 
ankitbeniwal profile image
Ankit Beniwal

Please don't hurt the web accessibility.

this is really annoying to people using screen readers

As she mentioned, it's bad for screen readers.

Collapse
 
waterlink profile image
Alex Fedorov

Hey, Ankit,

I understood the full paragraph differently:

Some developers would add an anchor link around the entire list item, this is really annoying to people using screen readers. It's also annoying to style, because you'd have to set the text-transform and color property to overwrite standard link behaviour on all text.

This paragraph means to me that the alternative to ::before solution is to wrap the entire content in a <a> tag. And this <a> method is bad for accessibility and screen readers.

The ::before method is actually suitable for accessibility (neutral, doesn’t affect it).

Please tell me if that makes sense.

Thread Thread
 
ankitbeniwal profile image
Ankit Beniwal • Edited

ohh alright. My bad. Thanks for making it clear.

Thread Thread
 
waterlink profile image
Alex Fedorov

No worries! Thank you for askingβ€”accessibility is an important topic!

Collapse
 
ironydelerium profile image
ironydelerium

The vertical padding one is actually a side effect of units in general: percentage units tend to be based on the width of the containing element when there is no other basis for determining them.

It's very handy for sizing things like a video player container so the page doesn't jump around while it loads, and also for making such players responsive.

Negative margins are one you have to be careful with, though - if you happen to have an element at the root of a scrolling container (including the main viewport) with negative horizontal margins, you will overflow in the horizontal direction resulting either in awkward horizontal scrollbars or, on a phone or tablet, a page that scrolls left/right without apparent reason.

Collapse
 
nerdydeedsllc profile image
Nerdy Deeds, LLC • Edited

With the exception of #4, not one of these would pass our code review. Don't get me wrong: I've used all of them, and WAY dirtier hacks besides, but the bottom line is none of them are NECESSARY anymore.

1 Or you COULD use the included display:flex; and related properties, and maintain both readability and semantic syntax.

2 Could do... or instead use the again-included FIGURE html element ("represents self-contained content, potentially with an optional caption, which is specified using the FIGCAPTION element. The figure, its caption, and its contents are referenced as a single unit.") and set a global text-decoration:none; to figcaption. To avoid annoyance.

3 Talk about screwing up some parsers! Try playing with those properties then handing it to someone for machine translation!

If you're concerned about animating the rotation, the transform-origin property is your friend. As to the non-intuitive cardinal directions, if you DO zero out the origin (transform-origin: 0 100%; seems to be most intuitive for most English speakers I've interfaced with. When used on the word "EXAMPLE" it would place origin where you'd expect it, bottom left of the first 'E'. "0 0" will put it at the top-left), as well as establishing the fixed ratio of the dimensions of the text ("position: absolute; font-size: XXXrem; line-height: XXXrem;", where both XXX's are the same value) you'll have no trouble with your mental model when it comes to unexpected orientations.

4 The reason it's based on width has to do with the mapped logical properties "padding-block-start" and "padding-block-end", which themselves have to do with the directionality (direction the language in question is read, like RTL/LTR) and orientation of the text (it's rotation) - the stuff you're mucking about with in #3 - and how it correlates to the correct rendering of the box model output. This is largely a legacy throwback to IE 5/6's need for "layout" on an object if I recall, but it's been years since I've paid attention to those.

Since you're USING a browser with such an implementation inbuilt (and because you've absolutely positioned the elements in #3, functionally removing them from that "layer" of the model) you don't see the layout butchery that takes place if it DIDN'T create these logical properties on the fly.

The "padding-bottom aspect ratio trick" was introduced by Thierry Koblentz (he called them "Intrinsic Ratios") back during his time with Yahoo in May of '09, where he leveraged this behavior for that exact purpose. The article is still floating around the web somewhere; I referred one of our JD's to it only a few months ago.

I suspect that the web's glacial speed to update fundamental standards/embrace deprecation (why we STILL support IE AT ALL, instead of just displaying a "Upgrade to a Real Browser" message, web-wide) is why it's never been corrected. Besides: in fairness, it works, and new devs are being taught it now as "expected behavior".

Collapse
 
moopet profile image
Ben Sinclair

I've never heard anyone call it "min margins" before. It's negative not minimum, and it makes debugging someone else's code very difficult. I've worked on sites that use the trick extensively and it's a crapshoot as to which element you get when you click "inspect"!

Collapse
 
cydstumpel profile image
Cyd

Told you it would get you dirty looks to use it. ✌️
English is not my first language FYI, in Dutch we use it as minus. I have no problem inspecting the right element though, cmd shift c and click the button ;). I would get you having some trouble inspecting the expanded clickable pseudo elements. These examples aren’t meant to be pretty, it’s why I call them dirty tricks ;)

Collapse
 
alohci profile image
Nicholas Stimpson

Not sure about the min-margins one. It could result in an unnecessary horizontal scroll bar if the viewport is narrow. But the others are good.

Collapse
 
cydstumpel profile image
Cyd

You could add an overflow hidden, or make sure the min margins don't outgrow the padding around the items on mobile, but you make a solid point that it's not that automatic

Collapse
 
alohci profile image
Nicholas Stimpson • Edited

The problem with using overflow:hidden is that if you've got something else on the page that genuinely needs horizontal scrolling, like a wide table, then that will get truncated.

For what it's worth, here's how I'd solve the problem, using wide spaces characters to make the gap between the anchors.

Collapse
 
dreamchild7 profile image
dreamchild7

Nice article. Thanks. Just tried the "expand clickable area.".

Collapse
 
emersonpaiva profile image
Emerson Paiva

The second item is really awesome! I didn't know until now.