サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
衆院選
www.bram.us
Recording of Fabrizio’s demo By adding a long transition-delay to a CSS property under certain conditions (which you can do using a Style Query), you can persist its value after the condition no longer applies. ~ Detecting the Scroll-Direction with CSS Scroll-Driven Animations One of the demos that I built as part of the “Solved by CSS Scroll-Driven Animations: Style an element based on the active
A shortcoming of MutationObserver (imho) is that it cannot be used to subscribe to value changes of CSS properties. To plug that hole I built a library allowing just that: @bramus/style-observer. It allows you to attach JavaScript callbacks to changes in computed values of CSS properties. It differs from previous attempts at doing this by not relying on requestAnimationFrame and by supporting prop
Whenever a post about Specificity in CSS – and by extension the Cascade itself – gets published I get very excited as it’s a core concept of the language that everyone should know. The more articles on this, the better! However, I also sometimes raise an eyebrow as from time to time I, unfortunately, encounter some parts that are not entirely correct of just outright wrong. To remove some of the c
Screenshot of the On-the-fly syntax highlighting of [contenteditable] code snippets demo with DevTools open. Thanks to Prism’s Tokenizer and the Custom Highlight API, the code is highlighted without the need for a bunch of <span> elements wrapped around each token. ~ The way syntax highlighters on the web typically work is a to wrap all tokens in <span> elements with a proper class and use CSS to
Recording of the BADASS Demo Scroll-Driven Animations can be used for more than driving an animation by scroll. In this post, I share how you can use Scroll-Driven Animations to detect the Scroll Velocity a user is actively scrolling in. That means that using only CSS you can style an element based on whether the user is scrolling (or not scrolling), the direction they are scrolling in, and the sp
To change a color based on whether Light Mode or Dark Mode used, you’d typically use a prefers-color-scheme Media Query. To make things easier, CSS now comes with a utility function named light-dark(). The function accepts two color values as its arguments. Based on which color scheme you are actively using, it will output the first or the second argument. ~ # Responding to Light or Dark Mode To c
Because Scroll-Driven Animations are only active when there is scrollable overflow, it is possible to use them as a mechanism to detect if an element can scroll or not. Mix in a Space Toggle or a Style Query, and you’ve got all you need to selectively style an element based on it being scrollable or not. ~ The Code If you’re here for just the code, here it is: @keyframes detect-scroll { from, to {
I’m extremely pleased to announce the release of Scroll-Driven Animations Debugger, a DevTools extension to visualize and debug Scroll-Driven Animations. ~ Table of Contents Demo Get the extension Backstory Known Issues and Limitations Future Plans Spread the word ~ # Demo To jump right in here’s a video of the extension in action, tested on scroll-driven-animations.style: The extension adds a new
Bram.us A rather geeky/technical weblog, est. 2001, by Bramus
Safari Technology Preview 137 just dropped, with unflagged support for CSS :has(). Often dubbed “the parent selector”, CSS :has() is way more than that … ~ # CSS :has()? As per selectors-4 specification: The :has() CSS pseudo-class represents an element if any of the selectors passed as parameters match at least one element. This selector is dubbed “the parent selector”, as the default cases indee
Things have been going hard for CSS in 2021. The CSS Working Group has cranked out a ton of work, polishing existing CSS features and specifying lots of new ones too — with experimental implementations already having landed in several browsers. Apart from supporting new features, browser vendors also focussed on fixing the top 5 browser compatibility painpoints (#compat2021) to make our dev-lives
There are some changes being made regarding viewport units. The additions — which are part of the CSS Values and Units Level 4 specification — define several viewport sizes: the Large, Small, and Dynamic Viewport. Thanks to these additions we will finally be able to solve that “100vh in Safari on iOS” issue. ~ # The Large, Small, and Dynamic Viewports The CSSWG has defined several extra Viewport S
Back in November 2020 it was announced that Chromium would experiment with Container Queries — back then just a proposal but earlier this year (February 2021) adopted to become part of the CSS Containment Module Level 3 Specification. Just before the weekend a first version of this experimental implementation landed in Chromium Canary for us to play with (behind a flag). Let’s take it for a test d
Mattias recently tweeted that his website can now be served over HTTP/3 “even though no browser supports it yet”. While it’s true that no browser supports it out of the box right now, there are options to enable HTTP/3. Here’s how. ~ Google Chrome If you search chrome://flags you’ll find an option named “Experimental QUIC Protocol” which you can enable: That alone however won’t do. You’ll also nee
Published by Bramus! Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …) View more posts
Right now I’m in Amsterdam attending CSS Day (my fourth time already!). Earlier this morning Bert Bos and Håkon Wium Lie – yes, the inventors of CSS – were on stage reflecting on the first days of CSS and things they’d’ve done differently or turned out differently than they expected. At the end of the talk the question came up if we, the audience, found if things were missing in CSS. Immediately a
UPDATE SEPTEMBER 2013: PS_Bramus.GoogleMapsTileCutter has been updated and now includes a nice UI dialog. A video of the new version in action can be viewed on YouTube. The download link below links to the latest version, so no worries there. Last week, I coded a Google Maps Tile Cutter script for use with Adobe Photoshop. The script automatically cuts/carves a very large image you’ve opened in Ph
What if you could extract all text strings from a PSD file into a TXT file? Sure, it’s possible, thanks to PS_BRAMUS.TextExport, the PSD2TXT script I wrote a few months ago. Now, what if you wanted to do that in the opposite direction and import strings from a TXT file into a PSD file (viz. TXT2PSD)? Look no further, PS_BRAMUS.TextConvert is here, and does both! What is PS_BRAMUS.TextConvert PS_BR
Looking for the ajax demo? jsProgressBarHandler 0.3.3 | Javascript Progress/Percentage Bar 1. Automatically created Progress Bars (Default Styling) Program Efficiency 15% « Select Options Website Projects Progress 35% « Select Options Weight Loss Progress 50% « Select Options Upload Progress Bar 80% « Select Options 2. Manually created Progress Bars (Custom Styling) Custom Progress Bar (without te
次のページ
このページを最初にブックマークしてみませんか？
『Bram.us – A rather geeky/technical weblog, est. 2001, by Bramus』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
