Hack: Detect DOM node insertions using plain CSS
David Walsh from Mozilla shows how to fire 'DOM changed' events from CSS. No need for JS to observe DOM mutation events or check the DOM manually – simply put: no deprecated API, no retarding loops.
With the CSS in place you add a listener for your custom 'DOM changed' event and that's it!
Related cards:
How to grep through the DOM using the Capybara API
When your Cucumber feature needs to browse the page HTML, and you are not sure how to express your query as a clever CSS or XPath expression, there is another way: You can use [all](http://rubydoc.info/github/jnicklas/capybara/master/Capybara/No...
Angular: Fixing "Referencing DOM nodes in Angular expressions is disallowed"
Reason
If you are using Coffeescript, it is likely to be the culprit. Since Coffeescript always returns the value of the last expression, it may return DOM nodes:
# coffeescript
scope.focus = ->
element.focus()
# javascript
scope.focus...
Using CSS counters - CSS | MDN
Counters are an awesome CSS feature you didn't know about. It is supported in all browsers and IE8+.
CSS counters are an implementation of Automatic counters and numbering in CSS 2.1. The...
Different CSS for IE using Sass
At times, it might be unavoidable to have different CSS rules for Internet Explorer than for sane browsers. Using Sass, this can be achieved in a relatively non-hackish way without CSS hacks.
Step 1
Move your curr...
Browser Hacks: CSS Rules to Target Specific Browsers And Versions
The linked site lists a wealth of CSS hacks that let you apply styles to just that one browser. You should be using this mostly for fixing browser issues and not give up on creating solid styles.
Get the last leaf of a DOM tree (while considering text nodes)
I use this to simulate the (non-existing) :last-letter CSS pseudoclass, e. g. to insert a tombstone at the end of an article:
findLastLeaf = ($container) ->
$children = $container.chi...
Cross-Domain Data with Rack and Rails | Union Station
Asynchronous JavaScript and CSS, also known as CSSHttpRequest, is a method of URI-encoding data in 2KB chunks split over several CSS rules with a modified data URI scheme. Because CSS is not subject to the same-origin policy, no service proxy is r...
CSS: Using interaction media detection to disable hover styles for devices that have no hover
Since late 2015, all major browsers (still excluding Firefox) support pointing device media queries. These can be used to distinguish e.g. coarse from fine pointers (e.g. finger vs mouse), or a device with hover support from one without (e.g. de...
Use jQuery's selector engine on vanilla DOM nodes
There are cases when you need to select DOM elements without jQuery, such as:
- when jQuery is not available
- when your code is is extremely performance-sensitive
- when you want to operate on an entire HTML document (which is hard to represent ...
jQuery: How to replace DOM nodes with their contents
You know that you can use jQuery's text() to get an element's contents without any tags.
If you want to remove only some tags, but keep others, use contents() and unwrap(). Here is how.
Consider the following example element.
$containe...