RGB has been the standard color model on the web for decades. It’s widely supported and works well. But it wasn’t designed to replicate the way humans perceive color. oklch() models lightness, chroma, and hue in a way that mirrors human vision. That makes color manipulation more predictable, accessible, and expressive than RGB allows. What […] The post oklch() in…
#css
41 posts
19 May
17 May
null How to Build Modern UI Components Using CSS Generators on SitePoint.
29 Apr
My software development team had a client who wanted to represent activity on a stage, not in the usual top-down layout that shows up all over the internet. A 3D stage? Reasonable request, slightly unreasonable visual problem. My wacky idea: what if this was mostly CSS? Maybe a little JavaScript. But mostly CSS. It turns […] The post How to…
8 Oct 2025
Safari recently implemented a non-standard (yet?) CSS random() function (currently only in WebKit, and not yet part of any CSS specification). Since many recent CSS features are directly aimed at replacing common JavaScript functionality, I expected this function to do the same. While it has some neat use cases, it doesn’t cover most of the scenarios where I currently use…
5 Nov 2024
Managing z-index is a classic challenge for front-end developers. As a project grows, display conflicts and bugs related to z-index can quickly turn into serious headaches. I recently took some time to clean up the z-indexes in one of our projects. In this article, I’ll share the approach I used for this cleanup (while also laying the foundation for keeping…
5 Dec 2023
Slack users have more power than ever to automate routine tasks and processes, saving themselves time each day. Workflow Builder, a task automation tool built into Slack, has continued to improve since its launch back in 2019. Along with various new steps and triggers, we built a new sidebar section for all available workflow steps.…
31 Jan 2023
Last March we announced the Interop 2022 project, a collaboration between Apple, Bocoup, Google, Igalia, Microsoft, and Mozilla to improve the quality and consistency of their implementations of the web platform. Now that it's 2023 and we're deep into preparations for the next iteration of Interop, it's a good time to reflect on how the first year of Interop has…
9 Oct 2022
This is continues of my previous post about how to remove unused CSS and convert unclear JavaScript to protect your source code in the post-build process. If you are using CSS libraries like Bootstrap, Tailwind CSS, etc.. and sometimes multiple frameworks. But your application components are not using all of the styles and it adds more weight to the application…
6 Oct 2022
Nowadays most applications are developed based on large CSS libraries like Bootstrap, Tailwind CSS, etc.. and sometimes multiple frameworks. But your application components are not using all of the styles and it adds more weight to the application performance. This post will explain the Angular post-build process to remove unused CSS and hidden JavaScript files that enhance the application security…
20 Oct 2021
Welcome to our Hacks: Decoded Interview series! We spoke with Thomas Park over email about coding, his favourite apps and his past life at Mozilla. Thomas is the founder of Codepip, a platform he created for coding games that helps people learn HTML, CSS, JavaScript, etc. The most popular game is Flexbox Froggy. The post Hacks Decoded: Thomas Park, Founder…
8 Sept 2021
Release time comes around so quickly! This month we have quite a few CSS updates, along with the new Object.hasOwn() static method for JavaScript. The post Time for a review of Firefox 92 appeared first on Mozilla Hacks - the Web developer blog.
1 Jun 2021
Firefox 89 has smartened up and brings with it a slimmed-down, slightly more minimalist interface. Along with this new look, we get some great styling features including a force-colours feature for media queries and better control over how fonts are displayed. The long-awaited top-level await keyword for JavaScript modules is now enabled, as well as the PerformanceEventTiming interface, which is…
19 Apr 2021
April is upon us, and we have a most timely release for you — Firefox 88. In this release you will find a bunch of nice CSS additions including :user-valid and :user-invalid support and image-set() support, support for regular expression match indices, removal of FTP protocol support for enhanced security, and more! This blog post […] The post Never too…
26 Jan 2021
To wrap up January, we are proud to bring you the release of Firefox 85. In this version we are bringing you support for the :focus-visible pseudo-class in CSS and associated devtools, , and the complete removal of Flash support from Firefox. We’d also like to invite you to preview two exciting new JavaScript features in the current Firefox Nightly…
15 Dec 2020
As December ushers in the final curtain for this rather eventful year, there is time left for one more Firefox version to be given its wings. Firefox 84 includes some interesting new features including tab order inspection, complex selector support in :not(), the PerformancePaintTiming API, and more! The post And now for … Firefox 84 appeared first on Mozilla Hacks…
20 Oct 2020
As October ushers in the tail-end of the year, we are pushing Firefox 82 out the door. This time around we finally enable support for the Media Session API, provide some new CSS pseudo-selector behaviours, close some security loopholes involving the Window.name property, and provide inspection for server-sent events in our developer tools. The post Coming through with Firefox 82…
1 Oct 2020
Porting an established static website from one generator to another can be daunting. In this post, Add-ons Engineering Manager Stuart Colville recounts the experience of migrating Firefox Extension Workshop, Mozilla’s site for Firefox-specific extension development resources, from the Ruby-based site generator Jekyll to JavaScript-based Eleventy. The post To Eleventy and Beyond appeared first on Mozilla Hacks - the Web developer…
7 Jul 2020
When we talk about the contrast of a page, or contrast between web elements, we’re assessing how color choices impact readability. For visitors with low vision, web pages with low or insufficient contrast can be hard to use. In this article, we’ll walk through the design and implementation of the prefers-contrast media query in Firefox, and look at why it's…
11 Jun 2020
The MDN Web Docs Learning Area teaches fundamentals of modern web development, beginning with HTML, CSS, and JavaScript essentials. In feedback this year, readers asked for a more opinionated, structured approach. They asked for coverage of client-side tooling, frameworks, transformation tools, and deployment tools widely used in today's workplace. Meet the Front-end developer learning pathway from MDN. The post Introducing…
7 Apr 2020
Firefox 75 is chock full of handy new dev tooling: instant evaluation in the web console, event breakpoints for WebSockets, and more. New web platform features include HTML lazy loading for images, the CSS min(), max(), and clamp() functions, public static class fields, and additions to Web Animations API support. The post Firefox 75: Ambitions for April appeared first on…
25 Mar 2020
Here are some web development learning resources for kids of all ages. All you need is a web browser. This collection looks at social VR experiences using Hubs and Spoke, CSS coloring and games that teach Grid and Flexbox, and WebXR field trips that are out of this world. The post Learn web technology at “sofa school” appeared first on…
11 Feb 2020
Today we’ve released Firefox 73, with useful additions that include CSS and JavaScript updates, and numerous DevTools improvements. We’ve added to CSS logical properties, pushed performance forward in the Console and the Debugger, and improved the WebSocket inspector. Thanks to all for the ongoing DevTools feedback. The post Firefox 73 is upon us appeared first on Mozilla Hacks - the…
7 Jan 2020
Though we are moving to a more frequent four-week browser release cycle, the Firefox 72 release is feature-rich and full of goodies. It includes many requested DevTools' updates and improvements. We also introduce Shadow Parts and the CSS Motion Path, and useful new JavaScript features. Plus, Picture-in-picture for video is now enabled for Mac and Linux users too! The post…
3 Dec 2019
Please welcome Firefox 71 to the stage! This time around, we have a plethora of new developer tools features including the web socket message inspector, console multi-line editor mode, log on events, and network panel full text search! And as if that wasn’t enough, there are important new web platform features available, like CSS subgrid, column-span, Promise.allSettled, and the Media…
20 Nov 2019
Firefox 71, now available in Developer Edition and Beta, is an exciting release for fans of CSS Layout. Recently, we covered the arrival of subgrid in Firefox, but there is another property that we've also been keeping an eye on. Firefox 71 implements column-span from Multiple-column Layout. In this post Rachel Andrew describes the progress of the Multiple-column Layout specification.…
23 Oct 2019
The display CSS property is how we change the formatting context of an element and its children. One of the first things you will learn about CSS is that some elements are block by default, and others are inline. The display property enables switching between these states. With support currently available only in Firefox 70, it is too early to…
21 Oct 2019
Have you ever landed on a web page and wondered what fonts are being used? Have you asked yourself where those fonts come from or why a particular font isn't loading? The font editor in Firefox provides answers and insights, and gives you the ability to make font changes directly, with a live preview. The post Quickly Alter Typography with…
18 Oct 2019
CSS Grid has been available in most major browsers since early 2017, and it makes web layout more powerful than ever before. But complex-looking new syntax (line-names! grid-areas! minmax! fit-content! fr units!) and missing IE11 support can make it scary. Don’t let that stop you. Miriam Suzanne offers some basic approaches you can put to work today. The post Faster…
2 Oct 2019
CSS is the design language of the web — one of three core web languages — but it also seems to be the most contentious and often perplexing. It's too easy and too hard, too fragile and too resilient. Love it or hate it, CSS is weird: not quite markup, not quite programming in the common (imperative) sense, and nothing…
1 Oct 2019
Today we’re launching a new video channel, with a selection of shorts to kick things off. Get started with an intro to Dark Mode on the web, by Deja Hodge. Then, Jen Simmons shows us how to access a handy third-panel in the Firefox Developer Tools. Miriam Suzanne has a video all about the ::marker pseudo-element and list counters. No…
3 Sept 2019
For our latest excellent adventure, we’ve gone and cooked up a new Firefox release. Version 69 features a number of great new additions including JavaScript public instance fields, the Resize Observer and Microtask APIs, CSS logical overflow properties (e.g. overflow-block) and @supports for selectors. The post Firefox 69 — a tale of Resize Observer, microtasks, CSS, and DevTools appeared first…
31 Jul 2019
Firefox 68 landed earlier this month with a bunch of CSS additions and changes. In this blog post Rachel Andrew takes a look at some of the things you can expect to find, like Scroll Snapping done right, the ::marker pseudo-element, and new tooling in Firefox DevTools for working with CSS. The post New CSS Features in Firefox 68 appeared…
18 Jun 2019
The CSS Scroll Snap specification gives us a way in CSS to snap between different elements in a page or scrolling component. In this post, Rachel Andrew explains how scroll snapping works, why we had a situation where browsers were running different versions of the specification, and how that's changing. The post CSS Scroll Snap Updated in Firefox 68 appeared…
5 Jun 2019
The subgrid feature which is part of Level 2 of the CSS Grid Specification is not yet shipping in any browser, but is now available for testing in Firefox Nightly. This is a feature that, if you have used CSS Grid for a layout of any complexity, you are likely to be pretty excited about The post CSS Grid Level…
5 Nov 2017
system-font-i18n-css provides twelve variations for the Sans-serif family of system font. This font stack provides more consistent character typesetting across multiple languages and all modern operating systems. system-font-i18n-css is optimized to select the best system font on a per-character basis, based on the unicode range of that character. system-font-i18n-css provides twelve variations for the Sans-serif family of system font. This…
8 Jan 2017
I finally got around to converting my avatar from a raster graphic to a vector format. I wanted to be able to animate the polygons using JavaScript and CSS. Another great advantage of a vector format is how the format lends itself to generate a PNG or JPG in any size. Massaging the SVG File Format First things first, I…
14 Dec 2016
Today we’re excited to announce a new makeover for the Small Improvements application; a new font family! Please welcome “Avenir Next”! This is all part of our mission to create a more enjoyable, engaging and enticing experience for Small Improvements users. The Design Team @ Small Improvements has had a big year; going responsive, updating colours, icons […]
7 Apr 2014
This is the list we’ve all been waiting for. The top 10 productivity booster techs for programmers that – once you’ve started using them – you can never do without them any longer. Here it is: 1. Git Before, there were various version control systems. Better ones, worse ones. But somehow they all felt wrong … Continue reading The Top…
1 Mar 2013
Every selector you write is additional complexity that will need to be maintained. Can you generalize or abstract that selector so other components can use it? Write your CSS selectors to be as concise as possible Write your CSS selectors to be as performant as possible, efficient as possible and even more efficient Don’t overqualify your CSS selectors Use the…
30 Sept 2010
Springs FrontController soll keine CSS-, PNG- oder JPG-Dateien verarbeiten oder Wie liefere ich statischen Content aus
SchakkoWenn man die grundlegende Funktionsweise von Spring MVC verstanden hat – ich empfehle an dieser Stelle die äußerst vorzügliche offizielle Dokumentation -, kommt man an den Punkt, an dem man auch Bilder oder Stylesheets in die Web-Applikation einbinden möchte. Dafür gibt es zwei Möglichkeiten. Spezifizieren eines eigenen URL-Suffixes für Request-Mappings […] The post Springs FrontController soll keine CSS-, PNG- oder…
29 Apr 2004
I ran across an old posting from dbaron about how CSS’s 2nd generation still can’t do simple box layout needed for UI, which means that the web is full of hacky table tags. XUL box layout, which appears to be headed for standardization in the CSS working group, is a known solution that should be … Continue reading "XUL box…