This article explains how to apply a global CSS grayscale filter to make every element on a website appear in shades of gray, discusses compatibility considerations, and provides a concise code example that works across major browsers.
The 2024 CSS update introduces ten powerful features—scrollbar‑gutter, scrollbar‑color, ::target-text, ruby‑align/position, relative color syntax with light‑dark(), native details accordions, content‑visibility, font‑size‑adjust, transition‑behavior, @property with step‑value functions, and offset‑path/position—enabling smoother layouts, dynamic theming, performance gains, richer typography, and complex animations without JavaScript.
Discover eight powerful yet lesser‑known front‑end tools—from UI component libraries and animation platforms to compatibility checkers and collaborative browsers—that can dramatically boost productivity and help you build high‑quality web applications.
The Vite Legacy Plugin adds browser compatibility to Vite projects by using Babel to transpile modern JavaScript, generating polyfill chunks, and offering configurable target browsers, while allowing developers to control whether legacy or modern bundles are produced through dedicated config, generation, and post‑build plugins.
jQuery’s latest 4.0 beta removes support for IE 10 and older browsers, introduces ES module builds with Rollup, updates FormData handling, and changes event order, while the team signals a full IE drop in the upcoming 5.0, sparking debate over jQuery’s future relevance.
The upcoming retirement of Chrome Manifest V2 forces extensions to adopt Manifest V3, which requires Chrome Web Store review for updates, dramatically slowing ad‑blocker rule changes and giving YouTube an advantage, while other browsers remain unaffected.
This article surveys several JavaScript audio‑recording libraries, compares their supported formats, evaluates their performance across browsers, and summarizes front‑end recording techniques—including MediaRecorder, WebRTC + AudioContext, and legacy Flash—while highlighting compatibility issues of major browser engines.
CSS cascade layers, introduced via the @layer rule, let developers organize style origins into named, ordered groups—such as resets, libraries, and custom overrides—so they can control precedence without increasing specificity, improve readability, and avoid conflicts, with full support in modern browsers.
This article explains the AVIF image format, its superior compression and quality compared to JPEG and WebP, provides a detailed comparison of image formats, offers conversion tools and command‑line examples, and shows how to integrate AVIF on the client, server, and via JavaScript polyfills for modern web development.
Deploying H.265 on the web is now viable thanks to Chrome 107’s hardware decoding and mature software decoders, but developers must navigate browser support differences, meet specific GPU and OS prerequisites, choose appropriate detection APIs, and implement a fallback hierarchy—from simple video element sources to MSE, WebCodecs, and finally WASM‑based soft decoding—to ensure broad compatibility and optimal performance.
This article explains how to deploy H.265 video at scale on the web by examining browser support, hardware and software decoding requirements, detection APIs, playback options such as src, source, MSE, WebCodecs and WASM, and provides a practical flow for graceful fallback across browsers.
This article explains React17's event mechanism changes compared to React16, covering event propagation phases, binding methods like inline HTML, DOM0, and addEventListener, event delegation for efficient handling, and browser event differences.
This article examines how modern browsers now support most ES6 features, compares the bytecode size of native ES6 syntax versus Babel‑transpiled ES5 code across a range of language features, and explains when skipping transpilation can improve performance while still handling polyfills and runtime requirements.
The article explains why cross‑browser testing is essential for modern web applications, outlines the major challenges such as automation complexity, infrastructure maintenance, and browser version proliferation, and proposes practical solutions including tool selection, cloud‑based platforms, and prioritized testing strategies.
The article explains how the CSS content-visibility property can dramatically improve rendering performance of long lists by rendering only visible elements, demonstrates before‑and‑after benchmarks, discusses compatibility and edge‑case issues, and offers practical fixes such as contain‑intrinsic‑size.
The article examines how Safari’s delayed support for modern Web APIs, Progressive Web Apps, and WebRTC creates significant challenges for developers seeking consistent experiences across browsers, while also exploring Apple’s motivations and the potential for future improvements.
This article explains why many Chinese websites turned gray on April 4, 2020, and shows how to replicate the effect by adding a global .gray class that applies a CSS filter, providing the exact code, usage examples, and browser compatibility details.
The article analyzes worldwide web‑browser market share, highlights the most important browsers by continent and device, and offers practical guidance for prioritizing cross‑browser testing to ensure consistent user experiences across diverse platforms.
Although both browsers receive identical data, Chrome and Firefox display sorted results differently due to their distinct underlying sorting algorithms—Firefox uses merge sort while Chrome employs a hybrid of insertion and quick sort—this article explains the issue, demonstrates implementations, and compares performance and optimization techniques.
This article explains why forcing a download dialog while preserving the original (possibly non‑ASCII) filename requires special handling of the Content‑Disposition header, reviews relevant RFCs, compares browser behaviours, and provides a standards‑compliant solution using RFC 5987 encoding.
This article explains the Preload keyword, how it enables early loading and decoupled execution of web resources, compares it with speculative parsing, async, defer and HTTP/2 Server Push, and provides practical usage guidelines and browser compatibility information.
The article explains how 75CDN, a static resource CDN maintained by the 360 front‑end team, has added ES Module support, details browser compatibility, shows how to enable ESM on the platform, and provides practical code examples for importing modules in web projects.
This article explains what APIs are, outlines various API types—including web service, source code, hardware, and WebSocket APIs—and discusses their browser compatibility challenges, such as deprecated SDK methods, REST method support, and cross‑origin issues, offering practical tips for developers to ensure reliable API integration.
This article explains which browsers currently support ES modules, how to enable them, the rules for module import paths, using nomodule for fallback, the default defer behavior of module scripts, and the execution order of inline and external module scripts.
This article shares a practical roadmap for transitioning into front-end development, covering browser engine fundamentals, essential web technologies, common compatibility challenges, recommended tools, popular frameworks, and engineering practices to help beginners build a strong foundation and advance their careers.
This article explains the WebP image format, compares its size and quality against JPEG/PNG, shows how to install command‑line tools, presents performance test results, and provides JavaScript and Nginx PageSpeed solutions for serving WebP to supported browsers.
This article shares personal insights on how designers and developers can improve web usability for older adults by addressing browser compatibility, clear iconography, intuitive instructions, and minimal click complexity, drawing examples from the author's mother’s online experiences.
