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

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

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

html {
  box-sizing: border-box;
}
CSS
Copy

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

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

@anandgraves

a {
  color: inherit;
}

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

@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  */
}
CSS
Copy

@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;
  }
}
CSS
Copy

@DasSurma

Reminded to put alt on your images:

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

@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;
}
CSS
Copy

@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;
}
CSS
Copy

@radibit

Vertically centering everything:

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

@tajdidr

You can also use the grid layout 🙂

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

@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);
}
CSS
Copy

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:
}
CSS
Copy

@tzzoo

Target every child except the last one:

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

@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;
}
CSS
Copy

@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;
  }
}
CSS
Copy

@ojrask

label[for] {
  cursor: pointer;
}
CSS
Copy

@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;
}
CSS
Copy

@snitramordep Vertical & center align

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

@michaelpumo Use flexbox for that instead!

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

@machtdesign

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

@diegoeis

/_ better css reset of all time _/

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

@ralfhoffmeister

p {
  max-width: 38em;
}
CSS
Copy

@holger1411

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

@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%;
}
CSS
Copy

@jordanmoore

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

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

@brunotron3000

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

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

@_caseyjacobson

svg {
  fill: currentColor;
}
CSS
Copy

@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%;
}
CSS
Copy

@amiegrrl

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

@ralfhoffmeister

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

@bkastl

sub,
sup {
  line-height: 0;
}
CSS
Copy

@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;
}
CSS
Copy

@ShaneHudson

I rely on

input:checked + label {
}
CSS
Copy

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

@innovati

Print external URLS:

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

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

@RussellSkaggs

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

@IschaGast

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

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

@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;
}
CSS
Copy

@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%);
}
CSS
Copy

@Eramdam

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

who said centering in CSS was still hard? 😛

@MichaelWhyte

Get list ready for navigation:

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

@adamtomat

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

@nice2meatu

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

(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));
}
CSS
Copy

@MattWilcox

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

@pxandbeyond

p {
  max-width: 75ch;
}
CSS
Copy

limits the max-width to 75 characters

.foo {
  margin-right: 1ch;
}
CSS
Copy

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

@argyleink

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

Used like:

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

Node presents itself when attached to DOM

@GustavoRSSilva

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

@FPresencia

Magic container responsiveness for all screen sizes:

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

@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’;
 }
}
CSS
Copy

@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;
}
CSS
Copy

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

@gups

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

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: