Best "tweet size" CSS Snippets ever

Days ago I saw a tweet on Twitter Michael Scharnagl asking people, What’s you favorite CSS snippets which you use again and again? Rules:

Has to fit in one tweet
Has to be vanilla CSS (not Sass, Less…)
You don’t have to include vendor prefixes

Here’s the original Tweet

justmarkup-tweet

Actually most of the snippets I used once or more, and I found some interesting snippets too. I thought about writing a blog post displaying all these snippets in a better way than Twitter tweets as I don’t like the view of tweets and replies, So I’ll try to add each useful snippet from the replies of the tweet.

One last thing I’ll try to mention the names of every snippet’s publisher but. I might not be able to mention all the names so you can Back to the tweet and check it.

Let’s start:

@justmarkup

img,
video {
  max-width: 100%;
  height: auto;
}

::selection {
  color: #000;
  background: #fbd404;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

@anandgraves

a {
  color: inherit;
}

label,
button,
input,
select {
  cursor: pointer;
}

@M_J_Robbins

Email client isolation;

.★:not(#★) {
  /* for targeting AOL */
}
@media yahoo {
  /* for targeting Yahoo */
}
u + .body .foo {
  /* for targeting Gmail */
}
#MessageWebViewDiv .foo {
  /* for targeting Samsung mail */
}
[OWA] .foo {
  /* for targeting http://Outlook.com  */
}

@machtdesign

Tel-Link - to avoid error

a[href^="tel"] {
  white-space: nowrap;
  pointer-events: none;
  text-decoration: none;
  color: inherit;
}
@media (max-width: 30em) {
  a[href^="tel"] {
    pointer-events: auto;
    text-decoration: underline;
  }
}

@DasSurma

Reminded to put alt on your images:

img:not([alt]),
img[alt=""] {
  outline: 5px solid red;
}

@justmarkup

img[alt*=".jpg"],
img[alt*=".jpeg"],
img[alt*=".gif"],
img[alt*=".webp"],
img[alt*=".png"],
img[alt*="Photographer:"],
img[alt*="Image of:"],
img[alt*="Photo of:"],
img:not([alt$="."]) {
  outline: 5px solid orange;
}

@Chrisedmo

A grid system in a tweet:

.fukol-grid {
  display: flex;
  flex-wrap: wrap;
  margin: -0.5em;
}
.fukol-grid > * {
  flex: 1 0 5em;
  margin: 0.5em;
}

@radibit

Vertically centering everything:

.🦄 {
  display: flex;
  align-items: center;
  justify-content: center;
}

@tajdidr

You can also use the grid layout 🙂

body {
  display: grid;
  place-items: center;
  height: 100vh;
}

@ChrisJPatty

I use these material design box shadows constantly. box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); Source

.classname {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

The next tweet will save you a lot of time if you faced this problem before 😄

@noncototient

When you have that on element causing horizontal scroll on the page and you don’t know what it is.

* {
        border: 1px solid red:
}

@tzzoo

Target every child except the last one:

li:not(:last-child) {
  border-bottom: 1px solid;
}

@laryro replied to the previous tweet

Or you could just do this (in case you just want to add a line between elements)

li + li {
  border-top: 1px solid;
}

@jim_savage

scaling base value:

:root {
  font-size: 12px;
}
@media (min-width: 768px) {
  :root {
    font-size: 14px;
  }
}
@media (min-width: 992px) {
  :root {
    font-size: 16px;
  }
}
@media (min-width: 1200px) {
  :root {
    font-size: 18px;
  }
}

@ojrask

label[for] {
  cursor: pointer;
}

@niksy

abbr[title],
acronym[title],
dfn {
  cursor: help;
}

img {
  font-style: italic;
}

textarea {
  resize: vertical;
}

[disabled] {
  cursor: default;
}

[aria-disabled="true"] {
  cursor: default;
  pointer-events: none;
}

.no-js button[type="button"] {
  display: none;
}

@snitramordep Vertical & center align

.foo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate (-50% -50%);
}

@michaelpumo Use flexbox for that instead!

.foo {
  display: flex;
  align-items: center;
  justify-content: center;
}

@machtdesign

a[href^="https://"]:hover:before {
  content: "\f023"; /* fa-lock */
}

@diegoeis

/_ better css reset of all time _/

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

@ralfhoffmeister

p {
  max-width: 38em;
}

@holger1411

.class {
  font-size: calc(1em + 1vw);
}

@jenlampton

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@jordanmoore

.class {
  display: flex;
  justify-content: space-between;
}

It still feels like cheating, it’s so easy.

@brunotron3000

.square {
  height: 0;
  padding-bottom: 100%;
}

Since padding % is related to the element’s width, with this code you can have a responsive square, adjust the % for different aspect ratios (56% for 16:9).

@Danno19008

.ellipsis {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@_caseyjacobson

svg {
  fill: currentColor;
}

@kg_creative

.wrapper {
  /* 16:9 */
  --ratio-h: 16;
  --ratio-v: 9;

  height: 0;
  overflow: hidden;
  padding-top: calc(var(--ratio-v) / var(--ratio-h) * 100%);
  position: relative;
}

.wrapper > .element {
  height: auto;
  position: absolute;
  width: 100%;
}

@amiegrrl

* {
  -webkit-font-smoothing: antialiased;
}

@ralfhoffmeister

input:focus::placeholder,
textarea:focus::placeholder {
  color: transparent;
}
//don’t forget to vendor-prefix

@bkastl

sub,
sup {
  line-height: 0;
}

@mdstaicu

I’m not as cool as the CSS grid kids, I still use this for vertical alignment:

.parent:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.child {
  display: inline-block;
  vertical-align: middle;
}

@ShaneHudson

I rely on

input:checked + label {
}

for a lot of things

@gerardkcohen

.visually-hidden {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@innovati

Print external URLS:

@media print {
  a {
    text-decoration: underline;
  }
  [href]:not([href^="#"]):after {
    content: " (" attr(href) ") ";
  }
}

Demo: https://t.co/QfxHSRbtL7

@RussellSkaggs

.modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: -100%;
  right: 100%;
  opacity: 0;
  transition: left 0s linear 0.5s, right 0s linear 0.5s, opacity 0.5s linear;
}
.modal-open {
  left: 0;
  right: 0;
  opacity: 1;
  transition: left 0s linear, right 0s linear, opacity 0.5s linear;
}

@RussellSkaggs

.btn {
  display: inline-flex;
  align-content: center;
  align-items: center;
}

@IschaGast

@media (inverted-colors) {
  img,
  video {
    filter: invert(100%);
  }

  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

@keithjgrant

Space out children of a box

.box {
  padding: 1em;
}

.box > :first-child {
  margin-top: 0;
}

.box > :last-child {
  margin-bottom: 0;
}

.box > * + * {
  margin-top: 1em;
}

@jim_savage

Giving a DIV a custom sized ratio.

div {
  --ratio-x: 16;
  --ratio-y: 9;
  position: relative;
}

div::before {
  display: block;
  content: "";
  padding-top: calc(var(--ratio-y) / var(--ratio-x) * 100%);
}

@Eramdam

.easyCenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

who said centering in CSS was still hard? 😛

@MichaelWhyte

Get list ready for navigation:

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

@adamtomat

img {
  vertical-align: middle;
}
```
  Removes
  that
  bit
  of
  white
  space
  under
  an
  image
  --------
  @TobiReif
  ```css
  body {
  overscroll-behavior: none;
}

@nice2meatu

.svg-inline {
  position: relative;
  top: 0.125em;
  height: 1em;
  width: 1em;
  flex-shrink: 0;
}

(last line only relevant when used inside a flex-container)

@LucP

::root {
  --min-col-width: 250px;
}

.overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--min-col-width), 1fr));
}

@MattWilcox

.calmUppercase {
  font-size: 0.9em;
  letter-spacing: 0.05em;
} /* No need to shout, just because you’re uppercase */

@pxandbeyond

p {
  max-width: 75ch;
}

limits the max-width to 75 characters

.foo {
  margin-right: 1ch;
}

adds 1 character space where needed

@antikris77

picture {
  position: relative;
  overflow: hidden;
}

picture:before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9 */
}

picture img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@argyleink

@keyframes present-yourself {
  to {
    opacity: 1;
    transform: translated(1, 1, 1);
  }
}

Used like:

button {
  opacity: 0;
  transform: translateX(1rem);
  animation: present-yourself 0.2s ease forwards;
}

Node presents itself when attached to DOM

@GustavoRSSilva

absolute-center: {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@FPresencia

Magic container responsiveness for all screen sizes:

.container {
  width: calc(100% - 40px);
  max-width: 1200px;
  margin: 0 auto;
}

@selbekk

Great way to sync media queries with your javascript:

body::before {
 content: ‘small’,
 display: none;
}
@media all and (min-width: 1000px) {
 body::before {
  content: ‘medium’;
 }
}
@media all and (min-width: 1200px) {
 body::before {
  content: ‘large’;
 }
}

@stephenmurdoch

// remove default styles
button {
  appearance: none;
}

// poor man's no-js checkbox toggler
input[type="checkbox"] ~ div {
  visibility: hidden;
}
input[type="checkbox"]:checked ~ div {
  visibility: visible;
}

I usually pair the above with a label, and then hide the checkbox.

@wwwulkan

Makes any text that is too long have 3 dots after it. It’s awesome for when you’re tight on horizontal space.

.truncated {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 15rem;
}

@gups

.transition-everything {
  transition: 300ms ease-in;
}

I know that I did nothing I just copy/paste the tweets content, But I think code here is much better than twitter and I want to use all the new snippets later. If you have any snippets Just comment below and I’ll add it soon with your name. We can make this post as a great resource for css snippets

Best "tweet size" CSS Snippets ever

Let’s start:

Some useful Links: