# polyfill Published articles for polyfill. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Let's Use the Emergent CSS random() Function in all the Browsers DevFeed: [Let's Use the Emergent CSS random() Function in all the Browsers]() Original publisher: [Read original article]() Author: Lee Meyer Published: 2026-08-31T15:12:19Z Content type: article Language: en Sources: [CSS-Tricks]() Topics: [CSS](), [Web Development](), [browser](), [JavaScript]() Tags: [articles](), [browser](), [browsers](), [css](), [css-functions](), [javascript](), [polyfill](), [random](), [resource](), [ui](), [ux]() ### AI overview This article explores the emerging CSS random() function and the effort to create a polyfill that works across browsers. It discusses controlled randomness in web layouts and UX, including a custom JavaScript confetti implementation, and considers how CSS could reduce the need for JavaScript or third-party frameworks. ### Source excerpt The journey to create a polyfill for the upcoming CSS random() function that works in all browsers. Let's Use the Emergent CSS random() Function in all the Browsers originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well. ## The Road to Component Model 1.0 DevFeed: [The Road to Component Model 1.0]() Original publisher: [Read original article]() Author: Eric Gregory Published: 2026-06-08T00:00:00Z Content type: article Language: en Sources: [Bytecode Alliance]() Topics: [WebAssembly](), [wasm](), [browser]() Tags: [apis](), [architecture](), [async](), [binaries](), [browser](), [compatibility](), [interfaces](), [polyfill](), [production](), [wasi](), [wasm](), [webassembly]() ### AI overview This article explains the path toward a stable, formally specified WebAssembly Component Model 1.0. It reviews how the Component Model and WASI relate, describes the Component Model as a foundational layer with WASI providing system-resource interfaces, and notes that both are already used in production while their specifications continue to evolve. ### Source excerpt WASI P3 is almost here, bringing native async support to the WebAssembly System Interface (WASI) and Component Model. In this post, we're looking to the next big milestone: a stable, formally specified Component Model 1.0. At February's Bytecode Alliance Plumbers Summit, Luke Wagner and Alex Crichton gave a preview of what the path to a stable 1.0 actually looks like. At Wasm I/O 2026 in Barcelona in March, Luke expanded on that vision. So let's take a look at where the Component Model is heading. ## Bringing Signals to Lit Labs DevFeed: [Bringing Signals to Lit Labs]() Original publisher: [Read original article]() Author: Lit Team Published: 2024-10-08T00:00:00Z Content type: release Language: en Sources: [Lit Blog]() Topics: [JavaScript](), [reactive](), [Web Components](), [interoperability](), [polyfill]() Tags: [compatibility](), [components](), [interoperability](), [javascript](), [polyfill](), [reactive]() ### AI overview Lit Labs announced @lit-labs/signals, a package that integrates the polyfill for the TC39 Signals proposal with Lit. It enables shared observable signals for reactive state management, automatic component updates, targeted re-renders, and interoperability across libraries and frameworks. ### Source excerpt The new Signals package integrates the TC39 Signals proposal with Lit ## The State of ES5 on the Web DevFeed: [The State of ES5 on the Web]() Original publisher: [Read original article]() Author: For library authors Published: 2024-09-08T15:18:32Z Content type: article Language: en Sources: [Philip Walton]() Topics: [JavaScript](), [legacy](), [Web Development](), [polyfill](), [Code](), [browser]() Tags: [article](), [browser](), [build-tools](), [code](), [dependencies](), [developers](), [es2015](), [javascript](), [legacy](), [polyfill](), [recommendations](), [web]() ### AI overview This article examines whether web developers and JavaScript library authors still need to transpile code to ES5. It uses data about browser support, popular libraries, tools, and websites to offer production recommendations, while discussing the bundle-size costs of transpilation and polyfills. ### Source excerpt Should web developers and JavaScript library authors still transpile their code to ES5? This post looks at what the data suggests based on what popular libraries, tools, and websites are doing ## Polyfill supply chain attack embeds malware in JavaScript CDN assets DevFeed: [Polyfill supply chain attack embeds malware in JavaScript CDN assets]() Original publisher: [Read original article]() Author: Liran Tal Published: 2024-06-26T05:00:00Z Content type: article Language: en Sources: [Blog RSS Feed | Snyk]() Topics: [Malware](), [polyfill](), [Security](), [supply-chain-security](), [JavaScript](), [snyk-code](), [Code](), [GitHub]() Tags: [acquisition](), [application-security](), [blog](), [cdn](), [code](), [developer](), [devrel](), [github](), [javascript](), [malware](), [open-source-security](), [polyfill](), [security](), [snyk-code](), [snyk-open-source](), [supply-chain](), [supply-chain-security]() ### AI overview The article reports a JavaScript polyfill supply-chain attack in which malicious code was embedded in assets served through a CDN after the polyfill project and domain changed ownership. It states that more than 100,000 websites may have been affected and explains how Snyk Code custom rules can detect usage of the affected CDN URL in JavaScript or PHP code. ### Source excerpt On June 25, 2024, the Sansec security research and malware team announced that a popular JavaScript polyfill project had been taken over by a foreign actor identified as a Chinese-originated company. ## New JavaScript Set methods DevFeed: [New JavaScript Set methods]() Original publisher: [Read original article]() Author: brian-smith Published: 2024-06-24T00:00:00Z Content type: tutorial Language: en Sources: [MDN Blog]() Topics: [Web Development]() Tags: [browsers](), [firefox](), [how-to](), [javascript](), [learn](), [performance](), [polyfill]() ### AI overview An introductory tutorial on newly supported JavaScript Set methods for comparing and composing sets, with examples and notes on uniqueness and performance. ### Source excerpt New JavaScript Set methods are landing across browsers. Learn about sets, how you can use these methods to compare different sets, create new sets with specific properties, and more. ## Nuxt 3.10 DevFeed: [Nuxt 3.10]() Original publisher: [Read original article]() Published: 2024-01-30T00:00:00Z Content type: release Language: en Sources: [The Nuxt Blog]() Topics: [Nuxt.js](), [Node.js](), [payload](), [polyfill](), [Server-side rendering](), [browser](), [view transitions]() Tags: [browser](), [bugs](), [development](), [experimental](), [features](), [libraries](), [node](), [node-js](), [nuxt](), [payload](), [performance](), [polyfill](), [release](), [server](), [ssr](), [update](), [view-transitions]() ### AI overview Nuxt 3.10 is a release packed with features and fixes, including automatic payload deduplication and caching during prerendering, SSR-safe unique IDs, module file injection, experimental polyfills for Node.js built-ins in client-side code, CookieStore support, and diagnostics for potential bugs and performance problems. ### Source excerpt Nuxt 3.10 is out - packed with features and fixes. Here are a few highlights. ## Advent of Code in C++ Template Metaprogramming DevFeed: [Advent of Code in C++ Template Metaprogramming]() Original publisher: [Read original article]() Author: Nelson Elhage Published: 2023-12-08T15:30:00Z Content type: tutorial Language: en Sources: [Nelson Elhage]() Topics: [Advent of Code](), [C++](), [Code](), [Compiler](), [polyfill]() Tags: [advent-of-code](), [c-plus-plus](), [code](), [compiler](), [polyfill](), [writeup]() ### AI overview An annotated walkthrough of solving the first Advent of Code problem using purely compile-time C++ template metaprogramming. It covers compile-time input handling, folds, helper types, and state tracking to calculate calibration values. ### Source excerpt This December, the imp of the perverse struck me, and I decided to see how many days of Advent of Code I could do purely in compile-time C++ metaprogramming. As of this writing, I've done two days, and I'm not sure I'll make it any further. However, that's one more day than I planned to do as of yesterday, which is in turn further than I thought I'd make it after my first attempt. ## Container queries land in stable browsers DevFeed: [Container queries land in stable browsers]() Original publisher: [Read original article]() Published: 2023-02-14T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [browsers](), [polyfill]() Tags: [browsers](), [polyfill]() ### AI overview The article discusses container queries becoming available in stable browsers and working with the related polyfill. ### Source excerpt Learn about working with container queries and the polyfill. ## Working with container queries and the polyfill DevFeed: [Working with container queries and the polyfill]() Original publisher: [Read original article]() Published: 2022-09-15T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [container](), [polyfill]() Tags: [container](), [learn](), [polyfill]() ### AI overview A tutorial about working with container queries and using the polyfill. ### Source excerpt Learn about working with container queries and the polyfill. ## LitElement 3.0 & lit-html 2.0: Early Preview Release DevFeed: [LitElement 3.0 & lit-html 2.0: Early Preview Release]() Original publisher: [Read original article]() Author: Lit Team Published: 2020-09-22T00:00:00Z Content type: release Language: en Sources: [Lit Blog]() Topics: [modern web development](), [releases]() Tags: [api](), [browser](), [html](), [performance](), [polyfill](), [release]() ### AI overview An early preview of LitElement 3.0 and lit-html 2.0 outlines planned breaking changes focused on performance, smaller size, API cleanup, and more reliable server-side rendering. ### Source excerpt Preview the next major versions of LitElement and lit-html. ## Tailwind CSS v1.5.0 DevFeed: [Tailwind CSS v1.5.0]() Original publisher: [Read original article]() Published: 2020-07-15T18:55:18Z Content type: release Language: en Sources: [Tailwind CSS Blog]() Topics: [Tailwind CSS](), [Web Development](), [modern web development](), [polyfill](), [PostCSS]() Tags: [component](), [github](), [plugin](), [polyfill](), [release](), [tailwind](), [tailwind-css](), [v1]() ### AI overview Tailwind CSS v1.5.0 is a minor release that adds variants for component classes, responsive container variants, focus-visible styling, and conditional styling for checkboxes and radio buttons. It also introduces plugin and configuration options for enabling these features, with improved CSS purging behavior and optional polyfill support for browsers. ### Source excerpt Tailwind CSS v1.5.0 is here, now with component variants, responsive container variants, focus-visible support, and more. ## Laravel v7.12.0 released DevFeed: [Laravel v7.12.0 released]() Original publisher: [Read original article]() Author: Laravel Team Published: 2020-05-20T05:35:00Z Content type: release Language: en Sources: [Laravel Blog]() Topics: [Laravel](), [Databases](), [Caching](), [Routing (disambiguation)](), [bug](), [polyfill](), [Symfony]() Tags: [bug](), [cache](), [database](), [dependency](), [laravel](), [polyfill](), [release](), [routing](), [symfony]() ### AI overview Laravel v7.12.0, released on May 19, 2020, adds TrustHosts middleware and the ability to skip middleware from resource routes. It also fixes issues involving queued mail attachments, authentication, database schema constraints, component generation, URL defaults, cache expiration, and attribute casting, while adding an explicit Symfony polyfill dependency and other changes. ### Source excerpt Laravel v7.12.0 is released in 2020/05/19, here are the changes we`ve merged into this release. ## ::part and ::theme, an ::explainer DevFeed: [::part and ::theme, an ::explainer]() Original publisher: [Read original article]() Author: Monica Dinculescu Published: 2017-12-18T00:00:00Z Content type: tutorial Language: en Sources: [Monica Dinculescu]() Topics: [Web Components](), [CSS](), [selectors](), [Document Object Model (DOM)](), [web-standards]() Tags: [components](), [css](), [deprecated](), [explainer](), [polyfill](), [properties](), [selectors](), [syntax]() ### AI overview This explainer reviews proposals for styling and theming Shadow DOM components, including shadow-piercing selectors, custom CSS properties, and the proposed ::part and ::theme approaches. It notes that the relevant specification was not yet final and that no reliable polyfill was available at the time. ### Source excerpt Updated May 18, 2020 (get it? :: ? I made a funny) Shadow DOM is a spec that gives you DOM and style encapsulation. This is great for reusable web components, as it reduces the ability of these components' styles getting accidentally stomped over (the old "I have a class called "button" and you have a class called "button", now we both look busted" problem), but it adds a barrier for styling and theming these components deliberately. Since a lot has changed since the last time I talked about styling the Shadow DOM, I wanted to give you a quick update about what new specs were in the works! Please note that this spec isn't quite final, which means that a) the syntax and capabilities will likely change and b) there isn't a polyfill you can use for realsies. --- Ok, so. When talking about styling a component, there are usually two different problems you might want to solve: 💇 Styling: I am using a third-party element on my site and I want this one to be blue 🎨 Theming: I am using many third-party elements on my site, and some of them have a ; I want all the s to be blue. Here's almost everything I know on this topic. A trip through time There have been several previous attempts at solving this, some more successful than others. If you've read my last post about this, you're already caught up. If you haven't, here's the deets: First came :shadow and /deep/ (which have since been deprecated, and removed as of Chrome 60). These were shadow-piercing selectors that allowed you to target any node in an element's Shadow DOM. Apart from being terribad for performance, they also required the user of an element to be intimately familiar with some random element's implementation, which was unlikely and lead to them just breaking the whole element by accident Custom properties allow you to create custom CSS properties that can be used throughout an app. In particular, they pierce the shadow boundary, which means they can be used for styli ## Simple JavaScript API wrapper DevFeed: [Simple JavaScript API wrapper]() Original publisher: [Read original article]() Author: Stanko Published: 2017-12-06T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [API](), [JavaScript](), [fetch](), [Promise](), [HTTP]() Tags: [api](), [es2015](), [fetch](), [http](), [javascript](), [javascript-api](), [polyfill]() ### AI overview A tutorial presenting a reusable JavaScript API wrapper built around native fetch. It explains parsing successful responses, converting HTTP failures and unresolved requests into custom errors, and handling the returned Promise. The code is provided as a native ES2015 module with usage examples and a CodePen demo using the Star Wars API. ### Source excerpt For handling API calls I have a small snippet I'm copying from project to project. I decided to clean it up, make more generic and share it. It is intended to be a starting point, so you might want to customize it to your custom needs. What it does? # It is a simple wrapper around native fetch.If you need a polyfill isomorphic-fetch is a great one. For successful requests it will parse the response and return it. When HTTP error occursIt detects errors based on request's HTTP status. it will throw a custom error with status code, error message and response (parsed if it is a JSON). If request never gets resolved, same custom error will be thrown but response will be set to null and status code to REQUEST_FAILED. Please note that function will return a Promise so you need to handle how it resolves. Code # It is written as a native ES2015 module, which means you may need to transpile it depending on your browser support policy. // ------------------------------------------------------ // // Simple JavaScript API wrapper // https://muffinman.io/blog/simple-javascript-api-wrapper // ------------------------------------------------------ // // For demo purposes I'm using this awesome Star Wars API const API_URL = 'https://swapi.tech/api'; // Custom API error to throw function ApiError(message, data, status) { let response = null; let isObject = false; // We are trying to parse response try { response = JSON.parse(data); isObject = true; } catch (e) { response = data; } this.response = response; this.message = message; this.status = status; this.toString = function () { return `${ this.message }\nResponse:\n${ isObject ? JSON.stringify(this.response, null, 2) : this.response }`; }; } // API wrapper function const fetchResource = (path, userOptions = {}) => { // Define default options const defaultOptions = {}; // Define default headers const defaultHeaders = {}; const options = { // Merge options ...defaultOptions, ...userOptions, // Merge headers headers: { ...defaultHea ## The Dark Side of Polyfilling CSS DevFeed: [The Dark Side of Polyfilling CSS]() Original publisher: [Read original article]() Published: 2016-12-22T18:18:08Z Content type: article Language: en Sources: [Philip Walton]() Topics: [CSS](), [polyfill](), [modern web development]() Tags: [article](), [css](), [polyfill]() ### AI overview This article explains why polyfilling CSS is difficult by building a polyfill for a hypothetical CSS keyword that returns a random number between 0 and 1. It contrasts CSS with JavaScript polyfills and explains how Houdini APIs could make CSS polyfilling possible in ways that are not currently available. ### Source excerpt Earlier this year I wrote an article for Smashing Magazine about Houdini, and I called it the "most exciting development in CSS you've never heard of". In the article I argue that Houdini APIs will (among other things) make it possible to polyfill CSS features in a way that simply cannot be done today. ## Loading Polyfills Only When Needed DevFeed: [Loading Polyfills Only When Needed]() Original publisher: [Read original article]() Published: 2016-09-27T22:41:26Z Content type: tutorial Language: en Sources: [Philip Walton]() Topics: [polyfill](), [browser](), [JavaScript](), [HTML]() Tags: [browsers](), [html](), [javascript](), [performance](), [polyfill]() ### AI overview The article explains why loading all polyfills for every user can penalize users on modern browsers, then presents the author's approach to conditionally loading polyfills only when needed. It notes tradeoffs involving feature detection, deprecated libraries, and user-agent-based services such as Polyfill Service. ### Source excerpt New JavaScript and HTML features are being introduced all the time that make our lives as developers easier. In many cases, these new features are so helpful we choose to use them on production websites before they're fully implemented in all browsers. To not break the experience for users on older browsers, we of course include polyfills for any not-fully-supported features. ## React Router & Webpack in Production DevFeed: [React Router & Webpack in Production]() Original publisher: [Read original article]() Author: Zach Silveira Published: 2016-03-13T04:00:09Z Content type: article Language: en Sources: [ReactJS News]() Topics: [React Router](), [Webpack](), [Development](), [Code](), [API]() Tags: [api](), [code-splitting](), [polyfill](), [react](), [react-router](), [webpack]() ### AI overview A practical account of using React Router and Webpack in production for a large application with many routes and code splits. It explains the client-side setup, route organization, asynchronous data loading, server rendering, and differences between server and client builds. ### Source excerpt I've been working on a pretty large react-router codebase at work. Currently it has around 50~ code splits, which as you can imagine, is a lot of routes. This is going to be a post on the things I've learned throughout building out my development / production config and how we are using webpack in production. ###Initial Setup Before I really dive into how my webpack config is setup and the problems I've found, I'll quickly go over how this app is setup. Currently, there's one entry point and it looks like this: import React from 'react' import { render } from 'react-dom' import { match, Router, browserHistory } from 'react-router' import AsyncProps from 'async-props' import routes from '../routes/index' /* globals document, window */ const { pathname, search, hash } = window.location const location = `${pathname}${search}${hash}` match({ routes, location }, () => { render( } routes={routes} history={browserHistory} />, document.getElementById('app') ) }) It looks like a standard react-router setup, except a couple things are different. For one, there's way too many routes to have them all in this file, so we are importing the main route object into this file. Second, we are using match on the client side. Without matching first, the client side would try to render before the splits were downloaded causing an error. You can read a little more about match on the client here. Next, we are using Ryan Florence's awesome async-props library for loading data into components. It allows me to load data from an api before the server renders components. It will pass the data down to the client for the client-side render, and then data will load as you navigate to new pages automatically. ###Routes Our main routes file looks like this: export default { component: 'div', path: '/', indexRoute: require('./index'), childRoutes: [ require('./login'), require('./account'), ... ] } There's a lot more require's in our app of course. And ## JavaScript is evolving DevFeed: [JavaScript is evolving]() Original publisher: [Read original article]() Author: Tor Arne Kvaløy Published: 2015-02-26T09:23:01Z Content type: tutorial Language: en Sources: [Finn.no]() Topics: [ECMAScript](), [JavaScript](), [polyfill](), [Babel](), [Front end](), [browsers]() Tags: [babel](), [browser](), [browsers](), [feature](), [frontend](), [javascript](), [polyfill](), [syntax]() ### AI overview This tutorial explains how ECMAScript 6 improves JavaScript with methods such as includes and find, new syntax such as arrow functions and scoped variables, and class support. It also describes using polyfills for older browsers and Babel to transpile newer syntax to ECMAScript 5. ### Source excerpt As a die-hard java-developer for several years I was quite annoyed by the fact that Java as a language lagged several years behind C#. (E.g. Java got lambdas last year, 6 years after C#, so standards are nice for compatibility, but tends to be slow to evolve.) Polyfill Now, as a frontend-developer and getting to know JavaScript, I have realized that JavaScript is lagging even further behind. Take for example the everyday case of checking if a string contains another string: "hello world".indexOf("hello") > -1 //=> true This is awkward and you know it, however JavaScript is evolving. The next version ECMAScript 6 is in its final phase, and will have, among several features, the following method: "hello world".includes("hello") //=> true Another new nice feature is for finding the first item in an array. It used to be written like this: for(int i = 0; i < array.length; i++){ if(array[i].something === something){ return array[i]; } } And now it can be written like: array.find(it => it.something === something); ECMAScript 6 is feature complete, and is started to be supported by modern browser like Chrome, Firefox and Internet Explorer 11. As for older browsers, great polyfills like core-js come to our rescue. Transpile While polyfills extend current objects with new methods, ECMAScript 6 also contains new language syntax. Let's look at the arrow function (also known as fat arrow): ["one", "two", "three"].map(v => v + "!") Older browser will not understand "=>" (for a long time!), so this code has to be transpiled to ECMAScript 5: ["one", "two", "three"].map(function (v) { return v + "!"; }); There are some great transcompilation tools out there, and the one we have used is Babel. You can even play around with it here. Scoped variables JavaScript will also get scoped variables (let and const): const hello = "Hello" if(true) { const hello = "Inner scoped hello" } This will transpile to: var hello = "Hello"; if (true) { var _hello = "Inner scoped hello"; } Classes And fina ## Use skip navigation links DevFeed: [Use skip navigation links]() Original publisher: [Read original article]() Author: Cameron Cundiff Published: 2013-05-11T00:00:00Z Content type: article Language: en Sources: [The A11Y Project]() Topics: [aria](), [polyfill](), [modern web development](), [WebKit](), [browsers](), [JavaScript](), [bug]() Tags: [aria](), [browsers](), [bug](), [chrome](), [javascript](), [polyfill]() ### AI overview The article explains how skip navigation links help keyboard users and screen-reader users bypass repeated navigation and reach a page's main content. It recommends combining skip links with a clear heading structure and ARIA landmarks, and discusses JavaScript polyfills for WebKit-based browsers affected by a browser bug. ### Source excerpt Use skip nav links in conjunction with a coherent heading outline and ARIA landmarks. You may need to also implement a JavaScript polyfill for Webkit-based browsers. It can be frustrating and fatiguing for folks with limited mobility to have to have to repeatedly tab through navigation links to get to the main content of a page. People who use screen readers face similar frustration when the page outline is not well defined. In order to address this issue, WCAG 2.0 has specified a guideline for bypassing repetitive blocks of content. One technique recommended by the W3C is to include a skip navigation link at the beginning of the page, that changes focus to the first element after the repeated content. Skip nav links are useful for users who use keyboard navigation only, but screen readers now support more sophisticated ways of navigating regions. Specifically, they support heading navigation and ARIA landmarks. You should take advantage of these features by using a clear heading outline and defining page regions, as illustrated in Quick Tip: ARIA Landmark Roles. Example Skip to main content
Disclaimer: The mechanism by which skip navigation links work had for some time been broken in Webkit-based browsers and has only recently been fixed. Until these browsers release the fixes, you may need to use a JavaScript polyfill to make skip nav links work. Notes Jim Thatcher pioneered skip navigation links as early as 1998 An example of a JavaScript polyfill by Nicholas C. Zakas. An alternative non-Javascript method would be to add tabindex="-1" or 0 to elements that don't normally receive focus. This adds them to the tab order. The bug in Chrome looks to apply to anchors as well. However, the tabindex bypasses the issue. ## \* { box-sizing: border-box } FTW DevFeed: [\* { box-sizing: border-box } FTW]() Original publisher: [Read original article]() Author: Paul Irish Published: 2012-02-01T17:11:00Z Content type: article Language: en Sources: [Paul Irish]() Topics: [CSS](), [Front end](), [browser](), [WebKit](), [polyfill](), [jQuery]() Tags: [browser](), [chrome](), [css](), [firefox](), [front-end](), [layout](), [padding](), [polyfill]() ### AI overview This article recommends applying a natural border-box sizing model to all elements by setting box-sizing on html and inheriting it through elements and pseudo-elements. It explains how this keeps declared widths stable when padding is added, discusses browser support and required prefixes for older Firefox, iOS, and Android versions, and notes compatibility with jQuery, Chrome DevTools, and mobile devices. ### Source excerpt One of my least favorite parts about layout with CSS is the relationship of width and padding. You're busy defining widths to match your grid or general column proportions, then down the line you start to add in text, which necessitates defining padding for those boxes. And 'lo and behold, you now are subtracting pixels from your original width so the box doesn't expand. Ugh. If I say the width is 200px, gosh darn it, it's gonna be a 200px wide box even if I have 20px of padding. So as you know, this is NOT how the box model has worked for the past ten years. Wikipedia has a great history of this box model. Jeff Kaufman also dove into the history Anyway, I have a recommendation for your CSS going forward: 1 2 3 4 5 6 7 /* apply a natural box layout model to all elements, but allowing components to change */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } Update August 2014: This code was updated to match new box-sizing best practices. Also prefixes are pretty much dead. This gives you the box model you want. Applies it to all elements. Turns out many browsers already use border-box for a lot of form elements (which is why inputs and textareas look diff at width:100%;) But applying this to all elements is safe and wise. Browser support Due to browser support, this recommendation is only for projects that support IE8 and up. (Full browser compat at MDN) Firefox <= 28 still needs the -moz- prefix, and <= iOS4, Android <= 2.3 need the -webkit-, but everyone else uses the unprefixed. You can find more info about a box-sizing polyfill for IE6 & 7 at html5please.com/#box-sizing (which was developed with * { box-sizing: border-box!). Is it safe to use? Totally. jQuery works pretty great with it (except this). As mentioned, browser support is excellent. And a number of projects use this layout model by default, including the WebKit Web Inspector (aka Chrome DevTools). I heard from Dutch front-end developer Yathura Thorn on his experience: We've