Skip to content

Instantly share code, notes, and snippets.

View jensgro's full-sized avatar

Jens Grochtdreis jensgro

77 followers · 53 following
View GitHub Profile
@paulirish
paulirish / what-forces-layout.md
Last active April 19, 2025 04:59
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
@bobbygrace
bobbygrace / trello-css-guide.md
Last active December 10, 2024 21:04
Trello CSS Guide

Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

@p3t3r67x0
p3t3r67x0 / prefixed-office-properties.md
Last active February 12, 2025 04:52
MS Office prefixed style properties can be used for older versions of MS Excel, MS PowerPoint or MS Word when you want to save a document, presentation, workbook, or worksheet as a web document, or even in older versions for MS Outlook.

MS Office prefixed style properties

mso-ansi-font-size

Note: Office only

mso-ansi-font-size: large | larger | <length> | medium | <percentage> | small | smaller | x-large | x-small | xx-large | xx-small
@leonderijke
leonderijke / svgfixer.js
Last active June 17, 2024 07:57
Fixes references to inline SVG elements when the <base> tag is in use.
/**
* SVG Fixer
*
* Fixes references to inline SVG elements when the <base> tag is in use.
* Firefox won't display SVG icons referenced with
* `<svg><use xlink:href="#id-of-icon-def"></use></svg>` when the <base> tag is on the page.
*
* More info:
* - http://stackoverflow.com/a/18265336/796152
* - http://www.w3.org/TR/SVG/linking.html
@p3t3r67x0
p3t3r67x0 / prefixed-properties.md
Last active October 31, 2020 15:16
Be aware that every rendering engine has its own implementation of prefixed properties. As extensions are made part of the standard, the unprefixed identifier is then substituted.

Prefixed style properties

-ms-accelerator

The -ms-accelerator property sets or retrieves a string that indicates whether the object represents a keyboard shortcut.

-ms-accelerator: false | true
@p3t3r67x0
p3t3r67x0 / pseudo_elements.md
Last active February 25, 2025 22:27
A CSS pseudo-element is used to style specified parts of an element. In some cases you can style native HTML controls with vendor specific pseudo-elements. Here you will find an list of cross browser specific pseudo-element selectors.

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {
@addyosmani
addyosmani / README.md
Last active April 6, 2025 09:15 — forked from 140bytes/LICENSE.txt
108 byte CSS Layout Debugger

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

@tobiasahlin
tobiasahlin / transitions.scss
Created August 6, 2014 12:43
Sass multiple transitions mixin
// Usage: @include transition(width, height 0.3s ease-in-out);
// Output: -webkit-transition(width 0.2s, height 0.3s ease-in-out);
// transition(width 0.2s, height 0.3s ease-in-out);
//
// Pass in any number of transitions
@mixin transition($transitions...) {
$unfoldedTransitions: ();
@each $transition in $transitions {
$unfoldedTransitions: append($unfoldedTransitions, unfoldTransition($transition), comma);
}
@Schepp
Schepp / gist:6074ee6ae1ab4298a0d5
Created May 22, 2014 08:35

#Talks

##Jeremy Keith

  • The idea of the internet is to make everyone a publisher
  • In contrast to Apps there is no gatekeeper
  • Grunt an SASS and so on are great but raise the entry bar for content creation
  • Geocities: Founded 1994. 3rd most visited on the web. Never the prettiest, but also a playground for everyone, for normal people.
  • 1999 Yahoo acquired Geocities, in 2009 it was shut down and 15 years of content were just wiped out
  • The content might be mostly ugly, but it is also a fragment of history
@kevinSuttle
kevinSuttle / touch-icons.html
Last active October 11, 2024 23:52
Touch icon link syntax
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- For the iPad mini and the first- and second-generation iPad on iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For the iPad mini and the first- and second-generation iPad on iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">
<!-- For iPhone with high-resolution Retina display running iOS ≤ 6: -->