サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
www.bram.us
Me, at CSS Day 2022, talking about Specificity (and the Cascade) 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 one of my eyebrows as sometimes I, unfortunately, encounter something that’s just o
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
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
lazierLoad is Bramus! his take at writing a delayed javascript image loader for use with PrototypeJS. lazierLoad automatically hooks itself to the page, finds all images and only loads those appearing “above the fold” resulting in faster page loads. The images not located in the viewport, are not loaded until they appear within it (viz. when the user scrolls down). The idea for lazierLoad was insp
UPD: fixed IE compatibility issue (thanks Kevin – Sep 19 2008 / 6pm) UPD: setPercentage now parses the targetPercentage to an Integer to avoid infinite loop (thanks Jack – Sep 07 2008 / 9pm) UPD: Moved from Event.Observe(window, ‘load’, fn) to document.observe(‘dom:loaded’, fn) in order to force people to use an up to date Prototype release. UPD: setPercentage now takes an overrideQueue param. If
このページを最初にブックマークしてみませんか?
『Bram.us – A rather geeky/technical weblog, est. 2001, by Bramus』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く