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
<?php | |
/* | |
* Plugin Name: Oh noes, not another SEO plugin! | |
* License: GPLv3 http://www.gnu.org/copyleft/gpl.html | |
*/ | |
add_filter( 'wp_title', function( $title ) { | |
if ( is_singular() ) $title .= ' — ' . get_bloginfo( 'name' ); | |
if ( is_archive() ) $title = sprintf( ' Archives: %s — %s', $title, get_bloginfo( 'name' ) ); | |
if ( is_home() ) $title = sprintf( '%s — %s', get_bloginfo( 'name' ), get_bloginfo( 'description' ) ); | |
if ( is_search() ) $title = sprintf( 'Searching for: %s — %s', get_search_query( true ), get_bloginfo( 'description' ) ); |
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] {
/* bling.js */ | |
window.$ = document.querySelectorAll.bind(document); | |
Node.prototype.on = window.on = function (name, fn) { | |
this.addEventListener(name, fn); | |
} | |
NodeList.prototype.__proto__ = Array.prototype; |
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.
elem.offsetLeft
, elem.offsetTop
, elem.offsetWidth
, elem.offsetHeight
, elem.offsetParent
'use strict'; | |
// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication | |
// http://creativecommons.org/publicdomain/zero/1.0/ | |
(function() { | |
// Update 'version' if you need to refresh the cache | |
var staticCacheName = 'static'; | |
var version = 'v1::'; |