Tag: css
-
CSS4 is here!
Peter-Paul Koch of QuirksMode proposes that CSS4 should be declared a "thing", for marketing reasons, and Dan agrees.
-
Using the Web for Exhibition Interactives
As he writes up notes for his successor, Dan explains how the Bodleian's interactive digital signage uses the power of the Web.
-
The Real Dark Web
An analogy between dark matter and the huge crowd of web developers who are using such "boring" technology stacks.
-
Reply to: A modern font loading strategy with the vanilla JS FontFaceSet.load() method
Chris Ferdinandi's suggestion of using FontFaceSet.load() to prevent FOIT seems overkill. What's wrong with font-display: swap;?
-
Reducing motion with the picture element
A simple, elegant way to use an inline CSS media query to provide "prefers-reduced-motion" support on animated content.
-
css-only-chat/README.md at master · kkuchta/css-only-chat · GitHub
Of all the things I've seen hacked-together with just HTML and CSS on the client-side, I never thought I'd I'd see a "push"-capable live chat app...
-
Blogging with semantic insertions and deletions
Adapting your CSS can make semantically-enhanced /
modifications to a blog post clearer to readers. -
Modern CSS on DanQ.me
Dan explains three of the cutting-edge CSS features implemented on his blog.
-
CSS-driven console graphics
There's an Easter egg in danq.me which you can see in your browser's debug console.
-
Making single color SVG icons work in dark mode
In a project I work on, we had a couple of buttons that consisted of just icons (with visually hidden help text). The awesome QA engineer I worked with, found some of those did not show up in dark mode, which rendered the buttons unusable for users of that mode. Using inline SVGs with currentColor …
-
When to use CSS vs. JavaScript
CSS before JS #
My general rule of thumb is…
If something I want to do with JavaScript can be done with CSS instead, use CSS.
CSS parses and renders faster.
For things like animations, it more easily hooks into the browser’s refresh rate cycle to provide silky smooth animations (this can be done in … -
The CSS Working Group At TPAC: What's New In CSS?
Last week, I attended W3C TPAC as well as the CSS Working Group meeting there. Various changes were made to specifications, and discussions had which I feel are of interest to web designers and developers. In this article, I’ll explain a little bit about what happens at TPAC, and show some examples and demos of …
-
CSS Border-Radius Can Do That? | IO 9elements
TL/DR: When you use eight values specifying border-radius in CSS, you can create organic looking shapes. WOW. No time to read it all ?— we made a visual tool for you. Find it here.
Introduction
During this year’s Frontend Conference Zurich Rachel Andrew talked about Unlocking the Power of CSS Grid Layout. At the end … -
Sub-Pixel Problems in CSS
Something that jumped at me, recently, was a rendering dilemma that browsers have to encounter, and gracefully handle, on a day-by-day basis with little, to no, standardization.
Take the following page for example. You have 4 floated divs, each with a width of 25%, contained within a parent div of width 50px. Here’s the question: How … -
DRY: Do Repeat Yourself
I am increasingly of the opinion that the general software engineering adage “Don’t Repeat Yourself” does not always apply to web development. Also, I found that web development classes in CS academia are not very realistic. These two problems turn out to have the same root cause: a lack of appreciation of what browsers do…
…