Skip to content

Instantly share code, notes, and snippets.

View bartveneman's full-sized avatar
🚜
[Object object]

Bart Veneman bartveneman

🚜
[Object object]
View GitHub Profile
@bartveneman
bartveneman / complexity-8804.css
Created January 28, 2026 15:13
The most complex CSS in the world
.content-with-accordion .accordion .accordion-content ul:not(.pagination):not(#primary-tabs):not(.filtrType_ul):not(.accordeon-menu):not(.is-accordion-submenu):not(.accordion):not(.ul-eco):not(.main-navigation-panels):not(.content-with-accordion .accordion .accordion-content ul:not(.accordion):not(.ul-eco):not(.main-navigation-panels):not(.content-with-accordion .accordion .accordion-content ul:not(.accordion):not(.ul-eco):not(.pagination):not(#primary-tabs):not(.filtrType_ul):not(.accordeon-menu):not(.is-accordion-submenu):not(.requirments_aop)):not(.site-middle-common .left-side ul:not(.accordion):not(.ul-eco):not(.pagination):not(#primary-tabs):not(.filtrType_ul):not(.accordeon-menu):not(.is-accordion-submenu):not(.requirments_aop)):not(.site-middle .left-side ul:not(.accordion):not(.ul-eco):not(.pagination):not(#primary-tabs):not(.filtrType_ul):not(.accordeon-menu):not(.is-accordion-submenu):not(.requirments_aop)):not(.Leaderships .text ul:not(.accordion):not(.ul-eco):not(.pagination):not(#primary-tabs):n
atrules.supports.browserhacks.unique Statistics (32,194 websites analyzed):
┌─────────┬───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┬─────────────┬──────────┬────────────────┬────────────┐
│ (index) │ Key │ Total Usage │ Usage % │ Websites Using │ Adoption % │
├─────────┼───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼─────────────┼──────────┼────────────────┼────────────┤
│ 0 │ '(-webkit-appearance:none)'
@bartveneman
bartveneman / style.css
Created August 24, 2025 19:20
CSS ::highlight() wishlist
::highlight(SyntaxAtruleName),
::highlight(SyntaxAtrulePrelude),
::highlight(SyntaxSelectorList),
::highlight(SyntaxSelector),
::highlight(SyntaxProperty),
::highlight(SyntaxValue),
::highlight(SyntaxNumber),
::highlight(SyntaxUnit),
::highlight(SyntaxPercentage),
::highlight(SyntaxFunction),
@bartveneman
bartveneman / spec.ts
Created November 22, 2024 09:43
Playwright clipboard testing
import { test, expect } from "@playwright/test";
test("Allows the selected CSS to be copied", async ({ page, context }) => {
// Allow clipboard permissions
await context.grantPermissions(["clipboard-write", "clipboard-read"]);
// Click the "Copy CSS" button
await page.getByRole("button", { name: "Copy CSS" }).click();
// Get the clipboard text
@bartveneman
bartveneman / coverable.css
Created December 25, 2023 20:10
Fully clickable element with link inside
/**
* Make entire parent clickable from a link within:
*
* <element class="coverable">
* <a class="coverable-link" href="https://example.com">Example</a>
* <img src="https://example.com/image.jpg">
* </element>
*/
.coverable {
position: relative;
@bartveneman
bartveneman / print.js
Created May 25, 2023 13:36
CSSTree-based prettify
import * as csstree from 'css-tree'
import { css } from './large-css.js'
let ast = csstree.parse(css, {
positions: true,
})
function indent(size) {
return ''.padStart(size, '\t')
}
@bartveneman
bartveneman / worker.js
Created May 24, 2023 11:42
Prettier in WebWorker example
import prettier from 'prettier/esm/standalone.mjs'
import cssParser from 'prettier/esm/parser-postcss.mjs'
onmessage = function (event) {
try {
let result = prettier.format(event.data, {
parser: 'css',
plugins: [cssParser]
})
postMessage(result)
.ad-cls.art-social:not(.clearfix):before,
.ad-cls.author-row:not(.clearfix):before,
.ad-cls.block-header:not(.clearfix):before,
.ad-cls.breadcrumb.trunc:not(.clearfix):before,
.ad-cls.browse-list:not(.clearfix):before,
.ad-cls.card-strip:not(.clearfix):before,
.ad-cls.card:not(.clearfix):before,
.ad-cls.comment-form:not(.clearfix):before,
.ad-cls.comment-post-box:not(.clearfix):before,
.ad-cls.comment-post-links:not(.clearfix):before,
@bartveneman
bartveneman / shadows.css
Created October 18, 2022 19:37
Box-shadows rage-tweet
.thing {
box-shadow: -80px 55.33333px #f2f2f2,-86px -119.66667px #f2f2f2,229px -72.66667px #f2f2f2,-125px 72.33333px #f2f2f2,53px -39.66667px #f2f2f2,242px 60.33333px #f2f2f2,-138px -220.66667px #f2f2f2,-12px -67.66667px #f2f2f2,-85px 58.33333px #239a98,80px -98.66667px #239a98,-127px 34.33333px #239a98,-218px -193.66667px #239a98,-222px -408.66667px #239a98,176px -191.66667px #239a98,56px 2.33333px #239a98,-46px -18.66667px #239a98,-97px -196.66667px #f2f2f2,3px 57.33333px #f2f2f2,-106px -29.66667px #f2f2f2,-109px .33333px #f2f2f2,39px -37.66667px #f2f2f2,-117px -92.66667px #f2f2f2,-152px -371.66667px #f2f2f2,113px -57.66667px #f2f2f2;
box-shadow: 0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff;
}
@bartveneman
bartveneman / console.js
Created July 1, 2022 19:00
Get font styles from a page
(() => {
var all = Array.from(document.querySelectorAll('*'))
var c = new Set()
var t = new Set()
for (var i = 0; i< all.length; i++) {
var el = window.getComputedStyle(all[i])
var size = el.getPropertyValue('font-size')
var family = el.getPropertyValue('font-family')
var weight = el.getPropertyValue('font-weight')