Skip to content

Instantly share code, notes, and snippets.

View dperini's full-sized avatar

Diego Perini dperini

241 followers · 4 following
View GitHub Profile
@dperini
dperini / getScrollingElement.js
Last active September 5, 2020 22:53
/*
* How to detect which element is the scrolling element in charge of scrolling the viewport:
*
* - in Quirks mode the scrolling element is the "body"
* - in Standard mode the scrolling element is the "documentElement"
*
* webkit based browsers always use the "body" element, disrespectful of the specifications:
*
* http://dev.w3.org/csswg/cssom-view/#dom-element-scrolltop
*
@dperini
dperini / scope-test.js
Created October 22, 2016 17:24
Simulate behavior of the new "Selectors Level 4" :scope selector
<!DOCTYPE html>
<html>
<head>
<title>NWMatcher Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../../src/nwmatcher-noqsa.js"></script>
</head>
<body>
<div class="a">
<div class="a1"></div>
@dperini
dperini / CSS_and_Selector_parsing_differences
Last active October 28, 2017 19:13
<!DOCTYPE html>
<html lang="en">
<head><title>CSS and Selectors-API parsing differences</title>
<style>
/* these rules have a correct "selectorText" so their style declaration are applied */
a[href="#"] { background-color: red; } /* style some elements */
a:not([href="#"]) { background-color: lime; } /* style some elements */
/* these rules have a incorrect "selectorText" so their style declaration are not applied */
a:not([href="#"] { background-color: #f00; } /* doesn't style any element */
@dperini
dperini / namespaces-and-tag-name-case.html
Last active May 25, 2018 11:48
Influence of namespace in tag name case (lower, upper, mixed)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Namespace testing</title>
<style>
body { font: 16px monospace; text-align: center; }
.table { display: table; border-width: 0 1px 1px 0; border-style: solid; border-color: #000; }
.row { display: table-row; border-width: 0 1px 1px 0; border-style: solid; border-color: #000; }