A rather geeky/technical weblog, est. 2001, by Bramus
Roger Johansson: SVG files may contain a title element which may or may not get announced by screen readers (depending on SVG embedding technique, browser name and version, and screen reader name and version). So far I haven’t run into a situation where I want any other behaviour than screen readers completely ignoring icons (since …
Continue reading “Hiding inline SVG icons from screen readers”
Rey Bango, after having read the aforementioned “How it feels to learn JavaScript in 2016”: A lot of the discomfort we’re feeling is the belief that we need to know how to use every new framework or tool that comes out. It’s really not the case. There will always be someone building a new tool …
Continue reading “You Can’t Get Comfortable in Web Development”
… with blackjack, and hookers! (ref) Introduction and Requirements A while ago, I created a small and simple flexbox-based grid system for use in the projects we make at work. The developed Grid System inspired upon how Bootstrap works: it divides the grid into 12 columns (configurable). it supports gutters in between columns (configurable). it …
Building a CSS Grid System isn’t that hard really, thanks to flexbox. Heydon has stripped it to its smallest form: .fukol-grid { display: flex; flex-wrap: wrap; margin: -0.5em; } .fukol-grid > * { flex: 1 0 10em; margin: 0.5em; } Fukol™ is a lightweight, breakpoint free, completely responsive, element query driven*, progressive enhancement based CSS …
Rachel Andrew: If you read something about CSS3 Selectors, then what is actually being described is something that is part of the CSS Selectors Level 3 specification. […] The CSS Working Group is now working on Selectors Level 4 with new proposed features plus the selectors that were part of Level 3 (and CSS 1 …
:checked support 😟With a new update about to roll (already rolling?) out, Gmail has added support for – amongst other things – media queries and non-inline styles. Along with that update however, they’ve also axed support for :checked: Also gone is the support for :checked selectors. The only pseudo-class selector supported in Gmail and G Suite webmail …
For a recent project we did at work I needed outlined text. Using text-shadow you can achieve the desired effect, but one must admit: it’s ugly. Some browsers however (Webkit) support the text-stroke property which gets a much nicer result. Here’s a demo pen: See the Pen CSS Transparent and Outlined Text by Bramus! (@bramus) …
From StackOverflow: It’s possible to include Emoji characters in modern browsers, but how can one make it a single color and choose that color? Using an (inset) text-shadow in combination with transparent text color this indeed is possible: With some more CSS – and an extra attribute – it’s possible to even achieve a (faux) …
Continue reading “Emoji Silhouettes and Emoji Outlines with CSS”
rotate syntaxIn the CSS Transforms Module Level 2 there will be individual transform properties for translate, scale, and rotate. This pen by Wes Bos demonstrates the new rotate syntax (use Canary): See the Pen ALbmzN by Wes Bos (@wesbos) on CodePen. So how exactly is said syntax? Here’s a snippet from the spec: The rotate property …