3 ms·
Well this blog post is _really_ shortsighted for a couple reasons: 1. There's position: sticky; recently added to CSS: https://drafts.csswg.org/css-position/#s
by err4nt 9y ago
Well this blog post is _really_ shortsighted for a couple reasons:
1. There's position: sticky; recently added to CSS: https://drafts.csswg.org/css-position/#sticky-pos https://drafts.csswg.org/css-position/#sticky-pos
2. Position: sticky; is gaining browser support fast: http://caniuse.com/#feat=css-sticky http://caniuse.com/#feat=css-sticky
So what I draw from that are the following insights:
3. The author of the bookmarklet should update the code to also check for elements now using position: sticky;
4. Sticky elements haven't peaked on the web, the deluge is _about_ to begin actually. Brace yourselves…
- coldtea 9y ago(3) That doesn't make the blog post "shortsighted", just missing a new trick, that's not much used yet anyway. (4) The websites that wanted to have a sticky header would have done it already with one of the several available current methods. The appearance of an easier way to do it with a single CSS rule is not gonna increase their number drastically.
- shmolyneaux 9y agoThis article was written in 2013, almost 3 years before any browser supported "position: sticky". I disagree that the blog is shortsighted, but as you mentioned, the bookmarklet should be updated.
- ncallaway 9y agoThe blog post was written in 2013.
- sean2 9y agoDoes this little update to the bookmarklet solve the issue? I'm not a webdev, feel free to fix it. (function () { var i, elements = document.querySelectorAll('body *'); for (i = 0; i < elements.length; i++) { if (getComputedStyle(elements[i]).position === 'fixed') { elements[i].parentNode.removeChild(elements[i]); } // 2017 update: if (getComputedStyle(elements[i]).position === 'sticky') { elements[i].parentNode.removeChild(elements[i]); } } })();
- jrapdx3 9y agoAlmost. This modification would cover it: ... for (i = 0; i < elements.length; i++) { if (getComputedStyle(elements[i]).position === 'fixed' || getComputedStyle(elements[i]).position === 'sticky') { elements[i].parentNode.removeChild(elements[i]); } } ... There are probably more clever ways to go, but this will do the trick. BTW haven't found many sites using "sticky", but good to be ready just in case.