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
View present-in-html-spec-missing-from-html-element-map.json
[
[ "HTMLElement", "abbr" ],
[ "HTMLElement", "address" ],
[ "HTMLElement", "aside" ],
[ "HTMLElement", "b" ],
[ "HTMLElement", "bdi" ],
[ "HTMLElement", "bdo" ],
[ "HTMLElement", "code" ],
[ "HTMLElement", "dd" ],
[ "HTMLDetailsElement", "details" ],
View listing-html-elements-and-constructors-in-spec.js
// run this code on this page:
// https://html.spec.whatwg.org/multipage/
[...document.querySelectorAll('#toc-semantics a')]
.filter(tag => tag.querySelector('code'))
.filter(({textContent}) => /The .+ element/.test(textContent))
.map(({textContent}) => textContent = textContent.replace(/.+The (.+) element/, '$1'))
.sort()
.map(name => [document.createElement(name).constructor.name, name])
View replace-word-in-text-nodes.js
function replaceWord(element, target, replacement) {
var iterable = document.createNodeIterator(element, NodeFilter.SHOW_TEXT)
for (var node; node = iterable.nextNode();) {
node.data = node.data.replace(new RegExp(target, 'g'), replacement)
}
}
View css-selector-escape.js
':root'
.split('')
.map(char =>
'.#[]:'.includes(char)
? char
: `\\${char.charCodeAt(0).toString(16)}`
)
.join('')
View transplant.js
// import {filter, all, stringify} from 'https://unpkg.com/cssomtools'
// import {parseACommaSeparatedListOfComponentValues} from 'https://tomhodgins.github.io/parse-css/index.js'
// Or a dynamic import() for copy/pasting into the JS console
import('https://unpkg.com/cssomtools').then(({process, all, stringify}) => {
import('https://tomhodgins.github.io/parse-css/index.js').then(({parseACommaSeparatedListOfComponentValues}) => {
function transplant(target = ':root') {
let output = {
html: '',
View css-overlay.js
// ==UserScript==
// @name CSS Overlay 2 | Ace Edition
// @namespace overlay
// @version 1.0
// @description For writing CSS stylesheets
// @author Tommy Hodgins
// @match *://*/*
// ==/UserScript==
document.documentElement.appendChild(document.createElement('style')).textContent = `
View toggle-visbug.js
// Toggle VisBug
(() => {
if (document.querySelector('vis-bug')) {
document.querySelector('vis-bug').remove()
} else {
const script = document.createElement('script')
const tag = document.createElement('vis-bug')
script.src = 'https://visbug.web.app/bundle.js'
document.head.appendChild(script)
document.body.appendChild(tag)
View critical-css-generator.js
// Run this on a loaded web page in the browser to log a CSS stylesheet to the console that contains all of the CSS rules that presently apply to the elements visible on the screen. This can be used for 'Critical CSS' generation
// You can use an import statement like this if it's in a <script type=module>
//import {process} from 'https://unpkg.com/cssomtools'
// Or a dynamic import() for copy/pasting into the JS console
import('https://unpkg.com/cssomtools').then(({process, all}) => {
// Log the final output to the console
console.log(
View selector-builder.js
// Point & Click Selector Builder
// Simple CSS Selector
function simpleSelector(node) {
const buildTag = tag => {
let tagName = tag.tagName.toLowerCase()
let className = Array.from(tag.classList).filter(name => name.includes('=') === false).join('.')
let attributes = (
tag.id.length
? `#${tag.id}`
@tomhodgins
tomhodgins / demo.html
Last active Sep 29, 2019
An example of a CSS stylesheet that can be processed with process-css-demo and turned into output.js with all of the CSS code and JavaScript runtime required to support the functions used in the input.css stylesheet. Online at: https://tomhodgins.com/demo/process-css-demo-demo/
View demo.html
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>process-css-demo demo page</title>
<h1>Process CSS Demo demo page</h1>
<h2>@--reset</h2>
<div id=reset-at-rule>
<p>This does not have the reset applied</p>
You can’t perform that action at this time.