Css related solutions
CSS position:absolute rendering bug on legacy Android: empty sibling ignored in coordinate origin. Technical breakdown and clean CSS pseudo-content fix.
A recap of my participation in the Hack.Developers Italia 2017 hackathon with the SPID smart button project: code style, linting, FOUC prevention, Autoprefixer, Jasmine unit testing, and Istanbul code coverage for a PA-ready JavaScript widget.
In Internet Explorer 8, box-sizing has a nasty edge case: dynamic table layouts with percentage padding do not honor border-box the way you expect. Legacy box model, a Can I use pointer, and a small test snippet.
This invaluable page lists every kind of CSS hack for any browser combo you might imagine, and also shows you which apply in the very browser you’re visiting from, by Jeff Clayton, is a mandatory bookmark and go-to resource when a CSS hack is needed, period.
CSS tables and the 1px missing pixel bug: on WebKit and Blink-based browsers (Chrome, Safari, Opera), elements with display:table and width:100% show a 1px flicker during parent resize. Bug analysis and two workarounds.
Checkboxes are a fundamental element for web forms, they are often needed to allow users to manifest their agreement to terms & conditions of services, making them a mandatory element to allow a registration or a purchase. The HTML <input type="checkbox"> element belongs to the form family and it has the advantage/disadvantage of being styled and managed differently based on the operative … Continue reading UX for fat fingers, increasing checkbox tappable area
Eight practical pitfalls when adapting a WebKit-first mobile site to Windows Phone 8 / Internet Explorer: CSS viewport, resize quirks, tap highlight, pointer events, CSS masks, icon fonts, and remote debugging.
Vertical mobile layout with CSS display:table: header, scrollable body, footer, three-part top bar and bottom commands. IE8/IE9 workarounds and CodePen demos.
I know why you’re here, I’ve gone through this as well. Like me you created a container box with dynamic height, 100%, and inside it you want some columns that reside near each other, occupying the same height of their parent, 100% them too. TL;DR: the gap comes from inline/line-box metrics; tame it with font-size: … Continue reading 4px ghost space with CSS display inline-block
