Skip to content

Instantly share code, notes, and snippets.

View NickGard's full-sized avatar

Nick G NickGard

  • northern Oregon
View GitHub Profile
@NickGard
NickGard / only-when.js
Last active March 4, 2024 19:39
This custom html element brings Media Query powers to markup.
/**
* # OnlyWhen brings Media Queries to HTML.
*
* It solves two use-cases via a simple API.
*
* ## Use case #1: remove nodes from the DOM.
*
* What's the problem this solves? With CSS Media Queries, DOM nodes are typically
* _hidden_ but still participate in DOM operations, like queries and IDREF resolutions.
* To include the nodes only when a particular media query matches, use the attributes
@NickGard
NickGard / safari-focus-polyfill.v2.js
Last active February 5, 2024 07:38
Updated polyfill for fixing click focusability in Safari. Handles shadow DOM clicks now.
(function () {
const capturedEvents = [];
let capturing = false;
let captureTarget = null;
let deferredDispatch;
const faultyElementSelector = [
"a[href]",
"area[href]",
"audio[controls]",
@NickGard
NickGard / safari-focus-polyfill.js
Last active January 29, 2024 10:24
Safari Focus Polyfill
(function() {
var capturedEvents = [];
var capturing = false;
function getEventTarget(event) {
return event.composedPath()[0] || event.target;
}
function captureEvent(e) {
if (capturing) {
@NickGard
NickGard / Animating the content attribute.markdown
Created November 2, 2015 20:22
Animating the content attribute

Animating the content attribute

In most browsers this is just going to show the letter 'A' but in the latest version of Chrome it should animate between 'A' and 'B'.

Not sure how useful this might be in the future, but it seems pretty cool!

A Pen by Robin Rendle on CodePen.

License.