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
/** | |
* Typing animation with pure CSS. | |
* Works best in browsers supporting the ch unit. | |
*/ | |
@keyframes typing { from { width: 0; } } | |
@keyframes blink-caret { 50% { border-color: transparent; } } | |
h1 { | |
font: bold 200% Consolas, Monaco, monospace; |
UPDATE personas | |
SET | |
updated_at = ( | |
SELECT personas_23_dic.updated_at | |
FROM personas_23_dic | |
WHERE DATE(personas.updated_at) = '2013-12-24' and personas.id = personas_23_dic.id | |
) | |
WHERE EXISTS ( | |
SELECT * | |
FROM personas_23_dic.id = personas.id |
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.
elem.offsetLeft
, elem.offsetTop
, elem.offsetWidth
, elem.offsetHeight
, elem.offsetParent
elem.clientLeft
, elem.clientTop
, elem.clientWidth
, elem.clientHeight
elem.getClientRects()
, elem.getBoundingClientRect()