This article explains how modern CSS features such as content-visibility, will-change, contain, font-display, scroll-behavior, and best‑practice techniques like avoiding @import can dramatically improve page rendering speed and user experience across devices.
This article explains how the CSS @property rule lets developers define the syntax, initial value, and inheritance behavior of custom properties, enabling type‑checked animations and transitions that were previously impossible with plain string‑based CSS variables.
This article introduces the CSS @property rule, explains how it enables type‑checking for custom properties, and demonstrates a variety of animation techniques—including color cycles, gradients, transforms, and numeric counters—to showcase the powerful new possibilities for modern front‑end development.
This article traces the evolution of CSS from its early specifications to modern CSS‑in‑JS approaches, examines CSS design patterns and Houdini APIs, compares preprocessors with CSS‑in‑JS, outlines popular libraries, discusses advantages and drawbacks, and looks ahead to cross‑platform and automated design integration.
This article traces the evolution of CSS from its early specifications through modular standards, design patterns, and preprocessors, then dives deep into CSS‑in‑JS, Houdini, popular libraries, their advantages and drawbacks, industry adoption, and future directions for web styling.
This guide explains how to improve the Jenkins UI by installing the Simple Theme plugin, applying an online Material CSS theme, and creating a local CSS file for further customization, complete with step‑by‑step instructions and code snippets.
This article explains how to clip overflowing content vertically while keeping horizontal overflow visible by using CSS techniques such as clip‑path and the contain property, providing code examples, demos, and a comparison with the traditional overflow:hidden approach.
This article walks through creating a fully CSS‑based star rating component using the HTML input type="range", exploring its shadow‑DOM structure, applying CSS masks, handling cross‑browser quirks, and providing complete code snippets for a flexible, lightweight solution.
This article explains the CSS Scroll Snap feature, covering its purpose, basic setup, key properties such as scroll‑snap‑type, scroll‑snap‑align, scroll‑snap‑stop, scroll‑padding, and scroll‑margin, and demonstrates practical use cases with code examples for building responsive scrollable interfaces.
This comprehensive guide explores CSS history, its evolution through standards, core concepts like cascade, specificity, inheritance, formatting contexts, box model, modern layout techniques, best practices, tooling, and future trends, offering developers a deep understanding of styling the web.
This article explains how to adapt Vue.js web pages for diverse mobile devices by configuring the viewport meta tag, using relative and viewport units, applying flex layouts, handling fixed positioning issues, implementing route transitions, and leveraging useful plugins and component registration methods.
This article explains how CSS logical properties, introduced in 2020, provide a writing‑mode‑independent way to define layout, reduce code, and improve compatibility across languages such as Arabic, Hebrew, and Japanese, with practical examples and best‑practice recommendations.
This article explores how the simple CSS rule margin:auto can be used to center fixed‑width blocks, align elements to the right, and combine with Flexbox for sophisticated layout patterns, while also addressing overflow challenges and offering practical code examples.
This guide compares five mobile H5 layout adaptation methods—percentage, rem, vw/vh, media queries, and flexbox—detailing their principles, implementation code, advantages, disadvantages, and practical tips to help developers choose the most suitable solution for responsive design.
This article explains the various ways browsers interpret the numeric value zero in JavaScript timers, numeric comparisons, type coercion, and CSS properties such as font-size, width, height, line-height, and transform, providing code examples and cross‑browser observations.
This article introduces Lemonj, a TypeScript‑based tool that uses Antlr to parse CSS/LESS/SCSS, detect code smells like !important, report their locations, and automatically refactor them across a codebase, complete with installation steps, usage commands, and sample output.
This article explains what responsive design is, outlines its advantages such as resource savings and SEO benefits, discusses the difficulties encountered with media queries in Ctrip's train‑ticket project, and presents concrete class‑based and server‑side solutions with code examples to improve maintainability and performance.
This article demonstrates how to replace heavy swiper libraries with a slim, pure‑CSS carousel using scroll‑snap‑type, scroll‑snap‑align, and scroll‑behavior, and adds a small JavaScript polyfill for smooth scrolling and automatic slide rotation, complete with npm packaging and compatibility notes.
This article explains how to create a website‑wide dark mode switch with only HTML and CSS by using an invisible checkbox as a toggle, the :checked pseudo‑class together with +/~ sibling selectors, and CSS filter functions like invert() and hue‑rotate() to transform colors, images and media without any JavaScript.
This tutorial demonstrates how to build a fully functional escape‑room style puzzle game using only HTML and CSS—no JavaScript—by leveraging checkboxes as switches, label‑for associations, sibling selectors, and CSS variables to manage scene navigation and interactive elements.
This article provides a comprehensive, step‑by‑step tutorial on downloading, installing, and extensively customizing the Hexo static‑site generator’s Next theme—including configuration files, style schemes, dynamic backgrounds, link styling, search integration, tag icons, avatar rotation, custom CSS, read‑more buttons, visitor counters, TOC numbering, shadow cards, word‑count features, favicon setup, top‑post ordering, and password protection—so readers can transform their blogs with a polished, personalized look.
This article provides a comprehensive guide to CSS animation techniques, covering basic transition and animation properties, continuous scrolling, bounce effects, like button bursts, SVG‑based loading and progress bars, typing simulations, frame‑by‑frame sprite animations, and the use of steps() for timing control, all illustrated with practical code examples.
This article reviews the latest CSS innovations presented at LondonCSS 2020, covering motion‑blur effects, scroll‑linked animations, subgrid layout, containment, content‑visibility, new color functions, variable fonts, accessibility pseudo‑classes, and advanced nesting techniques, complete with code examples and demos.
This article introduces nine widely used open‑source CSS frameworks—including Bootstrap, PatternFly, Material Components, Pure, Foundation, Bulma, Skeleton, Materialize and Bootflat—detailing their features, typical use cases, GitHub activity, and links, to help developers choose the right tool for building attractive web interfaces.
This article explains why comments are essential for code readability and maintenance, describes the syntax of comments in HTML, CSS, JavaScript and other languages, shows practical shortcuts, special tags, real‑world examples, and recommends VS Code extensions for writing consistent, useful annotations.
This article reviews typical mobile H5 compatibility problems such as iPhone X safe‑area adaptation, click delay and penetration, 1 px border rendering, position‑sticky support, and soft‑keyboard layout shifts, and provides practical CSS/HTML/JS solutions for each.
The article explains why common CSS vertical‑centering tricks can leave pixel offsets when fonts differ, details how font metrics such as ascent, descent, and x‑height determine the true baseline, and provides a calculable vertical‑align offset method—while noting its metric‑gathering overhead and anticipating native Houdini support.
This guide explains how to obtain, install, and switch custom themes for the Typora markdown editor, including downloading official or third‑party themes, copying them to the Typora themes folder, and using mdnice CSS files for additional styling options.
This article presents a curated list of ten essential front-end development tools—including Glitch, Shadows, Coolors, Blobmaker, GetWaves, Undraw, Marcdown, Postwoman, Screely, and a CSS Grid Generator—explaining their key features and how they can streamline coding and design workflows.
This article explores essential CSS layout patterns—including horizontal‑vertical centering, equal‑height sections, sticky footers, equal‑column grids, the Holy Grail layout, 12‑column systems, space‑between justification, the clamp() function, and logo alignment—showing practical Flexbox and Grid solutions with code examples and live demos.
This comprehensive guide walks you through essential CSS layout techniques—including horizontal and vertical centering, equal‑height columns, sticky footers, 12‑column grids, holy‑grail layouts, and responsive design—using Flexbox and Grid with clear code examples and visual demos.
This article details the technical design and implementation of a CSS‑based countdown timer, component‑driven multi‑platform development, and a high‑concurrency real‑time interaction system using WeChat Cloud Development's watch API for Tencent Games' 2020 online conference.
This guide explains how to calculate the exact start and end points of an angled linear gradient that fills text on an HTML canvas, covering the necessary geometry, trigonometric formulas, step‑by‑step derivations, and practical code snippets for accurate rendering.
This article explains how to add dark mode support to H5 pages by using JavaScript to toggle CSS classes and CSS media queries, discusses system compatibility across platforms, provides practical code examples, and outlines additional media features for broader UI adaptations.
The article explains the CSS Containment specification and its contain property, detailing how layout, paint, and size containment can improve rendering performance while noting potential side‑effects, and provides practical code examples and guidance for safe adoption in modern web development.
This article introduces CSS Grid layout for web developers, explaining why Grid is needed, its core concepts such as containers, items, lines, cells, and areas, and demonstrates practical usage with code examples, including template definitions, row/column placement, gaps, and safe implementation strategies.
This article explains how many Chinese web sites use hidden CSS ::before content to hide characters, shows how to locate the relevant network request, decode the span class mappings from obfuscated JavaScript, and restore the original text for successful web scraping.
Bootstrap 5 Alpha introduces a jQuery‑free core, drops Internet Explorer support, revamps the documentation UI, adds CSS custom properties, expands the grid system and utilities, and brings numerous enhancements to forms, colors, and overall developer experience.
The article explains why mouse hover events may only trigger on a transparent text element, explores CSS stacking contexts, stacking levels, and ordering rules, demonstrates various code examples and visual diagrams, and offers three practical solutions to fix overlapping element issues on web pages.
This article explains the concept and benefits of CSS sprites, analyzes their drawbacks for web performance and security, and provides a step‑by‑step Python‑based method—including code snippets—to extract and sum numbers hidden behind sprite images used as an anti‑scraping measure.
The article presents a behavior‑preset dynamic layout system that uses DPR‑derived root font sizes and rem units to automatically adapt full‑screen pages across diverse device aspect ratios and resolutions, offering preset rules for backgrounds, element scaling, and anchoring, thus eliminating the need for multiple style sheets.
This article explores how to recreate versatile tooltip UI components by first using CSS clip‑path techniques, then switching to SVG path methods for better handling of borders, shadows, gradients, and custom arrow shapes, while providing code snippets and a visual generation tool.
This article explains how web fonts are rendered, why the same design draft can show different typefaces on Windows and macOS, and provides practical guidance on using the CSS font-family property, including handling of common fonts and Emoji symbols to achieve consistent, cross‑platform typography.
This article presents practical front‑end optimization strategies, covering ES6 syntax shortcuts, efficient JavaScript array operations, careful use of closures and timers, as well as CSS tricks like sprites, animation, and avoiding repaint/reflow to improve website performance and cross‑browser compatibility.
This weekly tech roundup reviews the past ten years of frontend evolution, forecasts the next decade, highlights Vue 3’s beta release and ES2020 finalization, and explores practical CSS math functions and Webpack’s Module Federation, offering concrete insights for developers aiming to stay ahead.
Learn four straightforward methods to render an entire webpage in grayscale—by editing CSS files, adding inline styles in the head, modifying the HTML tag, or applying universal CSS filters—complete with code snippets for each approach.
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.
This guide explains how to refresh the Jenkins interface by installing the Simple Theme plugin, applying an online material CSS stylesheet or a local custom CSS file, and configuring the theme settings to achieve improved fonts, syntax highlighting, and console output appearance.
This article provides a comprehensive guide to the CSS vertical-align property, explaining its purpose, supported elements, value categories, interaction with line-height, common pitfalls, and practical code examples for achieving precise vertical alignment in modern web layouts.
This article explains why dark mode has become a web design focus, describes system‑level dark/light themes, and provides step‑by‑step CSS and JavaScript solutions—including media queries, custom properties, color‑scheme, filters, mix‑blend‑mode, image handling, and loading strategies—to implement reliable dark mode across browsers.
This article explains why dark mode has become a web design priority, describes the system‑level nature of dark/light themes, and provides practical CSS and JavaScript solutions—including media queries, custom properties, color‑scheme, filters, mix‑blend‑mode, and transition effects—to implement seamless dark mode support across browsers.
This article provides a comprehensive guide to the CSS background property, covering its syntax, individual sub‑properties, tables of default values, basic usage examples, advanced topics such as multiple images, gradients, positioning, sizing, attachment, and even the experimental element() function, all illustrated with clear code snippets and visual diagrams.
This article explains how to resolve the iPhone X bottom safe‑area blank space that appears when using height: 100% in WKWebView, providing both native iOS adjustments and a temporary front‑end CSS workaround with code examples.
This article explains why WeChat articles may appear with a black background due to macOS dark mode and the CSS prefers‑color‑scheme media feature, and provides two practical solutions—command‑line tweaks for Chrome and a lightweight app—to restore the original light appearance.
This guide explains why Chinese web fonts are large, shows how to subset them using the font‑spider‑plus tool, and provides step‑by‑step commands and code snippets for creating @font‑face rules, compressing fonts, generating CSS (including base64 encoding), and integrating the result into a website.
This article examines the problem of global CSS scope pollution in React components and presents three practical solutions—namespaces, CSS‑in‑JS, and CSS Modules—detailing their implementation, advantages, and trade‑offs, with code examples and guidance on when to use each approach.
This weekly roundup from WecTeam highlights essential frontend topics—including practical Nginx tips for developers, CSS rendering fundamentals, strategies for building visual editors, declarative UI on mini‑program platforms, and engineering practices for React and TypeScript—offering concise overviews and links to the full articles.
This article explains how the CSS display property controls both the external formatting of an element and the internal formatting context of its children, introduces the newer two‑value syntax (e.g., display: inline‑flow‑root), and discusses current browser support and practical usage.
This article explains why Shadow DOM exists, introduces its core concepts and features, and provides step‑by‑step code examples for creating, styling, and defining custom elements with Shadow DOM, while also covering compatibility and best practices for modern frontend development.
This article explores the challenges of CSS class naming, reviews the evolution from chaotic early practices through atomic and modular approaches, explains BEM conventions, and provides practical rules and code examples for creating clear, maintainable class structures in modern front‑end development.
This article explains the concept of skeleton screens, demonstrates how to use the CSS :empty selector, and provides a step‑by‑step Vue implementation—including route‑aware class switching—to reduce white‑screen time on slow networks.
This article explains how to create a high‑stability image magnifier in Vue by calculating mask positions based on mouse events, moving the background image accordingly, and optimizing performance with initialization checks and scroll handling, providing full source code and usage instructions.
This article details how to redesign a learning report by selecting a lightweight React‑compatible visualization library, implementing exam score line charts with Recharts, customizing SVG labels and Bezier curves, creating a carousel bar chart, and using CSS‑mask techniques to render non‑continuous status bars.
This article explains CSS stacking context, stacking level, and stacking order concepts to clarify the internal logic of Z-axis display order for web elements.
In this article, the author explains CSS blend modes, lists all 16 blend-mode keywords, groups them into functional categories, and demonstrates practical uses of background‑blend‑mode and mix‑blend‑mode with step‑by‑step code examples, including multi‑background techniques and visual results.
This article explains what SVG is, outlines its key advantages such as broad browser support, small file size, scalability, CSS styling, animation, transparency, and SEO benefits, and shows why designers and frontend developers should adopt SVG to improve website performance and visual quality.
This article explains the browser rendering pipeline—from network communication and HTML/CSS parsing to DOM and render tree construction—highlighting common misconceptions, performance bottlenecks, and practical optimization strategies such as DNS reduction, TCP reuse, HTTP/2 features, efficient CSS selectors, and JavaScript loading techniques.
This article explains how to achieve pixel‑perfect restoration of design drafts on mobile H5 pages by adapting to different pixel densities and screen sizes, using global CSS units like rem and vw, and automating px‑to‑vw conversion with the postcss-px-to-viewport plugin.
This article uses physical analogies to explain why converting design drafts to web prototypes is challenging, clarifies the box model, positioning, and floating concepts, and shows how to visualize CSS layout as a three‑dimensional structure for more intuitive front‑end development.
The article explains how to replace manual client‑specific logo and login‑background swaps with a custom Webpack merge‑less loader that injects client assets during build, offering low intrusiveness, strong extensibility, richer styling options, and a smoother developer experience compared to simple copy scripts.
This article details the practical implementation of the 360 AI speaker's landing page, covering screen‑resolution analysis, large‑image rendering choices, responsive rem‑based typography, HTML structure, CSS positioning, custom web‑font integration, and a pure‑CSS sticky‑footer solution, all built under tight time constraints.
This article introduces CSS Next, a PostCSS plugin that brings future CSS syntax to current browsers, explains how to integrate it into a Webpack workflow, and demonstrates key features such as custom properties, @apply, calc(), custom media queries, custom selectors, and nesting with code examples compared to Sass and Less.
This article introduces PostCSS, explains its role in transforming CSS via JavaScript plugins, demonstrates how to integrate it with tools like Webpack and its JavaScript API, and provides a step‑by‑step guide for creating a simple PostCSS plugin that doubles pixel values, including handling of Less syntax.
An in‑depth look at how the NetEase Music 2018 Listening Report’s rich, emotion‑driven animations were crafted, from designer‑written CSS code and thousands of lines of motion design to practical decisions on formats like GIF, SVG, Lottie, and the custom BX‑AE2CSS tool that exports After Effects animations directly to CSS.
The article examines the perceived conflict between JavaScript and CSS/UX developers, explains how community segregation and social media amplify the divide, and proposes practical steps for fostering collaboration and reducing the "JS vs CSS" war in front‑end development.
This article explains the BEM (Block‑Element‑Modifier) naming convention, why it is needed for style isolation, readability and maintainability, outlines its syntax and common patterns, and provides practical guidelines for page, shared, and local component naming in modern front‑end projects.
This article compiles frequent CSS problems—from button styling and overflow handling to flex‑wrap, grid layouts, long‑word breaking, transparent gradients, pseudo‑elements, and input accessibility—offering concise code solutions and practical tips to improve cross‑browser compatibility and user experience.
This article explains how CSS determines the rendered size of images by defining intrinsic size, specified size, default object size, and concrete object size, outlining the calculation process, and demonstrating the effects of width, height, background-size, contain, and cover through multiple code examples.
This episode of the Quick Q&A column answers common CSS questions—such as element‑specific property limits, the hyphens property, and Chrome’s minimum‑font‑size effect on rem units—while also offering practical career advice for aspiring front‑end developers.
Bootstrap 3.4.0 has been released after a long delay, bringing new classes, Algolia search, multiple XSS fixes, documentation improvements, upgrade instructions, and a new Open Collective funding project, while also previewing upcoming work on v4.2 and v5.
This guide compiles the seven key CSS scroll modules—generation, smooth scrolling, snap positioning, boundary behavior, hiding, inertia, and appearance—providing property syntax, browser support notes, and practical examples to help developers implement precise scrolling effects.
The article argues that despite some programmers dismissing CSS as merely declarative, CSS selectors are powerful conditional tools that can express complex logic, and explains why methodologies like BEM and OOCSS intentionally limit their use to keep styles maintainable.
This article explores a wide range of CSS shadow techniques—including single‑side box‑shadow, background animations, 3D pseudo‑element shadows, multi‑layer text shadows, long shadows, colorful gradients, filter‑based shadows, and neon effects—providing code samples and practical tips for modern front‑end development.
This article explains why the traditional method of adding a bottom‑bar class fails on iPhone X‑style devices, and demonstrates a modern solution using viewport‑fit and safe‑area insets to keep content clear of the notch and bottom bar in both portrait and landscape orientations.
This article explains how to achieve responsive design by calculating viewport heights for various desktop and mobile resolutions, using CSS viewport units (vh, vw) and rem together with media queries and JavaScript to dynamically switch scaling modes for consistent UI across devices.
This guide offers a step‑by‑step roadmap for aspiring front‑end developers, covering essential JavaScript fundamentals, DOM mastery, UI design, client‑server communication, and framework selection, while emphasizing practice, side projects, and continuous learning.
This article explains how the CSS content property works with ::before and ::after pseudo‑elements, demonstrates which values are accepted or rejected—including numeric and calc() values—shows how to use counters and images, and highlights common pitfalls such as treating numbers as strings.
This guide explains Huawei's iStack and CSS technologies for stacking low‑end and high‑end switches, covering roles, stack IDs, priorities, physical and logical ports, connection methods, detailed configuration commands, and direct‑link detection (DAD) to ensure reliable network operation.
This article explains how to adapt web pages for iPhone X's bottom home indicator by using the viewport‑fit meta tag, the CSS env() and constant() functions, and various padding or margin techniques to ensure fixed elements stay within the safe area, with practical code examples.
This guide introduces Emmet, the powerful IDE plugin that transforms short CSS‑style abbreviations into full HTML or CSS code, explains how to enable it in IntelliJ IDEA, and provides concrete syntax examples such as descendant, sibling, parent, multiplication, and ID/attribute shortcuts to dramatically speed up front‑end development.
This article explains how browsers parse HTML, build the DOM and CSSOM, create the render tree, and perform layout and paint, highlighting why understanding CSS's role in the critical rendering path is essential for improving page load speed and user experience.
The article explores how front‑end typography standards—covering base font size, font‑scale formulas, and line‑height rules—can be derived from visual ergonomics, mathematical ratios, and practical engineering constraints, ultimately recommending 16 px as the optimal base size and a line‑height of font‑size + 8.
This weekly newsletter curates nine insightful articles covering Google’s Guess.js toolkit, I/O 2018 web highlights, front‑end AR techniques, Chrome’s autoplay restrictions, a deep dive into Redux, WebAssembly versus JavaScript performance, comprehensive CSS line‑break methods, ten common software architecture patterns, and guidance on front‑end engineer career advancement.
An engineer from Tencent shows how to recreate Peppa Pig entirely with pure CSS by exploiting the border‑radius property to craft ellipses, rotate them, layer colors, and mask gaps, providing step‑by‑step code for each body part and a complete, animated illustration.
This tutorial walks you through creating a Chrome extension—from understanding what extensions are, setting up the manifest and HTML files, testing in developer mode, adding movie‑background features with the TMDb API, to publishing the finished extension on the Chrome Web Store.
An insider recounts a mid‑autumn phone interview at a major tech firm, detailing the nervous preparation, the unexpected direct jump to technical questions on JavaScript, cross‑origin issues, event handling, and HTML/CSS, and concludes with the surprising early offer and reflections on the experience.
This article explains why simple HTML/CSS solutions are often preferable to JavaScript, and demonstrates seven practical techniques—including navigation highlighting, hover‑based menus, custom form controls, equal‑height columns, dynamic item layouts, form submission, and automatic Enter‑key handling—each with clean code examples.
This article compares four Python web‑scraping selectors—regular expressions, BeautifulSoup, lxml/XPath, and CSS—detailing their strengths, weaknesses, performance, and installation difficulty to help developers choose the most suitable tool for extracting data from sites like JD.com.
This article explores how to create a flexible overflow effect using pure CSS—leveraging flex‑wrap, @supports, and container queries—to display different text snippets based on container size, while providing fallbacks for browsers that lack modern features.
This tutorial demonstrates how to use CSS background-blend-mode with the lighten blend mode to recolor black‑on‑white images, explains the difference from mix-blend-mode, shows code examples, discusses limitations with transparent backgrounds, and outlines compatibility and further possibilities.
