Skip to content

Instantly share code, notes, and snippets.

Writing CSS

Tommy Hodgins tomhodgins

Writing CSS
Block or report user

Report or block tomhodgins

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
tomhodgins / list-colors-used-on-site.js
Created Feb 12, 2020
Run these from your browser's JS console to get a report of everything JS can read from CSSOM
View list-colors-used-on-site.js
import(``).then(({process, property}) => {
const found = new Set
property('color', true),
property('background-color', true)
rule => {
if ( {
View auto-expand.html
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type=module>
View --auto-expand.html
input {
--auto-expand: width;
textarea {
--auto-expand: height;
tomhodgins /
Created Feb 5, 2020
Use this with Apple's Script Editor to refresh the Chrome web browser and execute whatever is on your clipboard as JS
var app = Application('System Events')
app.includeStandardAdditions = true
var browser = Application('Chrome').windows[0].activeTab()
// Chrome
function loadEnd(callback) {
return browser.loading()
? loadEnd(callback)
tomhodgins / partial-tag-name-matching-selectors.html
Created Jan 28, 2020
What if CSS had something like [attribute="selectors"] for matching partial tag names
View partial-tag-name-matching-selectors.html
/* equals tag name */
custom-element {}
View wait-for-tag-with-mo.js
const MO = new MutationObserver(processNodes)
function processNodes(entries) {
entries.forEach(({addedNodes}) =>
.filter(node => node.matches && node.matches('div.zp-Zotpress'))
.forEach(node => node.textContent = node.textContent.replace('Available at:', ''))
View wait-for-tags-matching-logic.js
const MO = new MutationObserver(processNodes)
function processNodes(entries) {
entries.forEach(({addedNodes}) =>
addedNodes.forEach(node => {
if (node.matches('a[href^=""]')) {
console.log('caught one!', node)
View sniff-name-from-ua.js
let browser
let ua = navigator.userAgent
if (ua.includes('Edg')) {
browser = 'Edge'
} else if (ua.includes('Firefox')) {
browser = 'Firefox'
} else if (ua.includes('Safari')) {
browser = ua.includes('Chrome') ? 'Chrome' : 'Safari'

Easy Element Query Workflow for 2020

  1. Your HTML in index.html
  2. Your CSS in input.css
  3. Run CSS through process-css-demo via (or node)
  4. Serve JS-supported styles
  5. ???
  6. Profit!




CSS Object Notation

CSSON is a superset of JSON that is parsed according to CSS syntax.

Any JSON can be parsed as CSSON, though not every CSS Style Sheet can be parsed as CSSON.


You can’t perform that action at this time.