Frequently forgotten limitations of the :visited link selector

• Sibling selectors like :visited + span don't work in CSS
• Nested selectors like :visited div don't work in CSS
• :visited link can be styled only via
• color
• background-color
• border-color
• column-rule-color
• outline-color
• fill (color only)
• stroke (color only)
• You cannot change the transparency of the above mentioned allowed rules via color: rgba() or similar techniques, i.e.
  a {color: rgba(128, 0, 0, 0.5)} a:visited {color: rgba(0, 128, 0, 0.1)}
  is effectively equal to
  a {color: rgba(128, 0, 0, 0.5)} a:visited {color: rgba(0, 128, 0, 0.5)}
• window.getComputedStyle, element.querySelector etc. won't detect :visited link

JSFiddle: https://jsfiddle.net/kt5ahmb7/

Reference to the MDN documentation page: https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector

Annoying bugs in Firefox related to input fields

1. style changes break click event handling on input elements
   test page:
   http://jsfiddle.net/ms4tmw3x/3/
   http://jsfiddle.net/ms4tmw3x/4/
   bug:
   https://bugzilla.mozilla.org/show_bug.cgi?id=422295
   https://bugzilla.mozilla.org/show_bug.cgi?id=493416
2. .focus() on a number input fires a blur event
   test page:
   http://jsfiddle.net/tn71zboe/1/
   bug:
   https://bugzilla.mozilla.org/show_bug.cgi?id=1057858

HTML5 draggable and contenteditable

Handle for draggable element

https://github.com/jdiamond/html5-examples/blob/master/drag-and-drop/drag-handle.html

var target, allowedHandleSelector = '.drag-handle';
var onmousedown = function(e) {
    target = e.target;
};
var ondragstart = function(e) {
    if (!target.matches(allowedHandleSelector) {
        // prevent drag when target does not match handle selector
        e.preventDefault();
        return;
    }
    ...
};

Make draggable element and its flying ghost look differently

http://farhadi.ir/posts/the-story-behind-html5-sortable/

var ondragstart = function(e) {
    var $element = $(e.target).closest('.draggable');
    $element.toggleClass('drag-ghost', true);
    // modify element after creation of flying ghost
    setTimeout(function() {
        $element.toggleClass('drag-ghost', false);
        $element.toggleClass('dragging', true);
    }, 0);

    ...

};

Disable spell checking for contenteditable element

MDN - spell checking in HTML forms

MDN - spellcheck attribute

<div spellcheck="false" contenteditable="true">Editable content</div>

<div spellcheck="false" contenteditable="false">This content could be made editable</div>

300px limit

At least on Windows browser clips width of ghost (drag image) to 300x and applies radial opacity gradient: opacity of the image drops from 1 directly under the mouse cursor to zero at 300px distance.

Avoid nesting draggable and contenteditable attributes

Here be dragons!