A rather geeky/technical weblog, est. 2001, by Bramus
See the Pen Cooltipz.css – Cool tooltips made from pure CSS by Bramus (@bramus) on CodePen. I especially like the fact that these are customisable using CSS Custom Properties. Here’s a few of them: :root { –cooltipz-bg-color: #fff; –cooltipz-text-color: #333; –cooltipz-border-radius: 5rem; } Installation per NPM: npm install cooltipz-css Cooltipz.css →
Anthony Ricaud, writing for the Web Performance Calendar, on the extra load that JavaScript can put on your site, and how you can replace some things with basic HTML and CSS: Relying on solutions provided natively by browsers enables you to benefit at low cost from the expertise of the community creating web standards. These …
Continue reading “HTML and CSS techniques to reduce your JavaScript”
Adam Argyle looking at several techniques to center in CSS, and how they hold up in several conditions (narrow screen, rtl, etc) In today’s challenge, we’re stress testing 5 different CSS centering techniques. See what techniques should earn a place in your tool belt by watching how they react to common layout stress. The contestants: …
Continue reading “Thinking on ways to solve Centering in CSS”
As the syntax for CSS Custom Properties is overly permissive it’s possible to store a JavaScript attack vector in them …
content-visiblity: auto; vs. jumpy scrollbars, a solution
As warned in content-visibility: the new CSS property that boosts your rendering performance you need to be careful with applying content-visibility: auto; on each and every element as the scrollbar might get jumpy. This is because elements will be rendered as they scroll into the viewport and will be hidden as they scroll out of …
Continue reading “content-visiblity: auto; vs. jumpy scrollbars, a solution”
Apart from writing a ton of articles for his website this year, Ahmad has also written a book on Debugging CSS: An ebook with lots of tips and techniques on how to debug CSS the right way with easy and studied methods. It’s a very practical book that should get you help solve any potential …
Melanie Richards: If you’ve ever tried to put a sticky item in a grid layout and watched the item scroll away with the rest of the content, you might have come to the conclusion that position: sticky doesn’t work with CSS Grid. Fear not! It is possible to get these two layout concepts working together. …
Wonderful demo by Jhey Tompkins, showcasing some recreated glitch effect buttons based upon Cyberpunk 2077. Recreate the Cyberpunk 2077 Button Glitch Effect in CSS → If you can’t quite follow there — as it’s quite a big demo — here’s a more simplified demo from 2015 featuring a simple glitch text effect: See the Pen …
Continue reading “Cyberpunk 2077 Button Glitch Effect in CSS”
Tim Severien: CSS may seem simple at first, but the learning curve isn’t linear; mastering it is hard. By no means is the language perfect, but it’s amazingly efficient at what it’s designed to do. Despite its simple syntax, there’s little it can’t do. What Makes CSS Hard To Master → Related: As Jeremy Keith …
Few tips by Jake Archibald — as presented at #ChromeDevSummit — on how you can use some of the new and upcoming web features to improve the performance of your page. Covered are the aforementioned content-visibility, Font metric override descriptors, the Back/Forward Cache, Portals, and Preloading