Items tagged css in Jul
Filters: Month: Jul × css × Sorted by date
viewport-preview (via) I built a tiny tool which lets you preview a URL in a bunch of different common browser viewport widths, using iframes. # 26th July 2022, 12 am
Bringing page transitions to the web (via) Jake Archibald’s 13 minute Google I/O talk demonstrating the page transitions API that’s now available in Chrome Canary. This is a fascinating piece of API design—it works by effectively creating a static image screenshot of the before and after states of the transition, then letting you define CSS animations that animate a transition between the two static images. By default the screenshot encompasses the full viewport, but you can instead define multiple elements within the page and apply separate transitions to them. It’s only available for SPAs right now but the final design should include support for multi-page applications as well—which means transitions with no JavaScript needed at all! # 13th July 2022, 4:26 pm
Defensive CSS (via) Fantastic new site by Ahmad Shadeed describing in detail CSS patterns which can help build layouts that adapt well to unexpected content—things like overly long titles or strange aspect ratio images, common when you are designing against UGC. # 6th July 2022, 5:16 pm
Is there an alternative to media queries for responsive design?
Yes: use percentage measurements for your layout components. That way you can build a website that works on a much larger range of screen sizes. You can combine this approach with media queries—for example, you could specify that your site has a 25% wide navigation menu and a 75% wide content area on devices that are wider than 400px, but any smaller than that and it collapses to a single column layout with the menu hidden and accessible only through a menu bar icon.
[... 102 words]Modernizr (via) Neat idea and an unobtrusive implementation: a JavaScript library that runs feature tests for various HTML5 features (canvas, box shadow, CSS transforms and so on) and adds classes to the HTML body element, allowing you to write CSS selectors that only apply if a feature is present. Detected features are exposed to JavaScript as boolean properties, e.g. Modernizer.multiplebgs. # 2nd July 2009, 10:56 am
Conflicting Absolute Positions. Neat technique, although it uses CSS expressions for IE compatibility so it may break down in IE 5 and 6 when JavaScript is disabled. # 17th July 2007, 10:44 pm
The CSS Redundancy Checker. A tool for checking your markup for outdated CSS rules that don’t match any of your HTML. We were discussing the need for something similar to this at Torchbox a few weeks ago. # 6th July 2007, 12:02 pm
Pretty link on Kottke
In a discussion on css-discuss recently about underlines a on links, I pointed to kottke.org as an example of clever use of CSS for links where by the link underline is a slightly later colour than the link text. Today, Jason explains the technique and the thinking behind it.
[... 59 words]