This article explains how to truncate overly long title text by showing the start and end with an ellipsis in the middle, using JavaScript to measure element widths, calculate cut‑off indices, and dynamically construct the shortened string, while also covering CSS‑only alternatives.
This article presents eight practical CSS techniques—including variables, :is/:where selectors, aspect‑ratio, clamp(), gap, logical properties, :has(), and @layer—to help developers write concise, maintainable, and conflict‑free styles for modern web projects.
This article explains how to design an artistic SVG signature, export it from Figma, and animate it using stroke‑dasharray, stroke‑dashoffset, and CSS keyframe animations to achieve a drawing effect on web pages.
The article shows how to create a realistic loading progress bar using only CSS—by styling a container and its ::before pseudo‑element, applying keyframe width animations with ease, cubic‑bezier or the newer linear() timing functions, and toggling between long and short animations via CSS variables for a smooth instant‑complete effect without JavaScript animation code.
This article surveys the most notable CSS additions in 2024—including custom scrollbars, cross‑document view transitions, scroll‑driven animations, new component utilities, dark‑mode helpers, @property, Popover API, @starting‑style and text‑stroke—providing code examples and usage guidance for modern web developers.
The article traces CSS’s evolution from its 1994 CHSS proposal and 1996 debut to the 2024 community‑driven redesign of its official logo, explaining the design process, the choice of the rebeccapurple colour, and where the new assets are hosted.
This article introduces and demonstrates several emerging CSS capabilities—including native style isolation with @scope, container queries via @container, advanced pseudo‑classes like :has, :where, :is, CSS nesting, the nth‑child of selector, text‑wrap balance/pretty, and the native popover element—providing code examples and usage tips for modern frontend development.
This article provides a thorough, step‑by‑step tutorial on TailwindCSS styling utilities—including preset width/height, custom values, viewport units, max/min dimensions, size shortcuts, margin/padding/space, border and divide utilities, outline, font sizing, weight, tracking, line‑height, text alignment, colors, overflow handling, wrapping and whitespace control—complete with code examples and visual demos.
This article explains how Taro converts standard W3C CSS into HarmonyOS ArkUI styles, addressing unit and layout differences, using a Rust‑based LightningCSS plugin and the Yoga layout engine, and detailing the full style initialization, matching, application, and update workflow for cross‑platform React development.
This article shows step‑by‑step how to create a more authentic‑looking loading bar with pure CSS by using a container element, a ::before pseudo‑element, keyframe animations, easing functions like cubic‑bezier and the new linear() function, and finally how to finish the bar instantly with CSS variables and a tiny JavaScript trigger.
The latest update introduces resolve.conditions default values, enhanced JSON serialization, expanded HTML resource reference support, postcss‑load‑config integration, Sass’s modern API default, customizable CSS output filenames in library mode, and several other minor tweaks affecting a small user base.
This tutorial explains how to recreate the iconic Star Wars opening crawl effect with HTML and CSS, covering the required markup, keyframe animation concepts, 3D perspective settings, and detailed code examples for star, wars, and byline animations.
This article explains how to replace traditional iconfont workflows by leveraging UnoCSS's Icons preset and FileSystemIconLoader to import local SVG files, customize size and color via utility classes, and manage icons efficiently with best‑practice folder structures and rendering options.
This article details how the Taro framework bridges the gap between W3C CSS and HarmonyOS's ArkUI by converting units, handling layout differences with Yoga, processing static and runtime styles, and managing style updates to achieve high‑performance cross‑platform applications.
Chrome 130’s DevTools Elements panel introduces a new scroll badge to highlight scrollable elements, along with upcoming overflow badges, and details how various built‑in badges like grid, flex, ad, scroll‑snap, container, slot, top‑layer, media, and subgrid help developers diagnose layout and rendering issues.
This article explains how to create a highly customized table composed of three synchronized Element UI tables in Vue, covering coordinated scrolling, dynamic info‑bar positioning, floating operation columns, style overriding, and performance considerations with code examples.
This article explains how Taro resolves the incompatibilities between standard CSS and HarmonyOS ArkUI CAPI styles by converting CSS at compile time, using a Rust‑based LightningCSS plugin, and employing the Yoga layout engine to achieve high‑performance, cross‑platform UI rendering.
This article explains how Taro adapts standard CSS to HarmonyOS's ArkUI by converting units, handling layout differences with the Yoga engine, and implementing an efficient runtime style system that maintains cross‑platform compatibility and high performance for React‑based applications.
This article explores how to achieve horizontal and vertical centering in CSS Flexbox using justify-content, align-items, and the more concise margin:auto approach, presenting multiple practical examples, code snippets, and advanced layout scenarios such as partial clustering, equal-width distribution, and dynamic spacing calculations.
This guide explains how to improve CSS maintainability and performance in Vite projects by adding global SCSS variables, using CSS Modules, configuring PostCSS autoprefixer, and integrating the Windi CSS atomic framework with attributify and shortcuts for streamlined styling.
This article provides concise Python code examples demonstrating how to read, write, and manipulate data using popular libraries such as PyYAML, toml, jsonschema, xmltodict, lxml, BeautifulSoup4, html5lib, and cssutils, covering scenarios from configuration files to XML/HTML parsing and CSS styling.
This article demonstrates how to recreate Bilibili's subtitle effect that avoids covering on‑screen characters by using a simple HTML structure combined with the CSS mask‑image property, providing a complete demo, visual results, and practical considerations for frontend developers.
This tutorial demonstrates how to enhance console.log messages with CSS colors, create ASCII art, embed base64‑encoded images, and render SVG or HTML content using the browser console, providing practical code examples and visual illustrations for developers.
This article explains the problems of using deprecated deep combinators in Vue scoped CSS, shows concrete code examples, walks through the Vue compiler’s AST transformation, demonstrates the correct :deep() syntax, and proves that nested :deep selectors are not supported.
The article explains how using the new CSS content-visibility property can dramatically reduce layout and paint costs when rendering tens of thousands of custom emojis, offering a lightweight alternative to full virtualization while preserving accessibility and searchability.
This article explains the evolution and practical CSS techniques for creating Frosted Glass, Acrylic Material, Neumorphism, and Glassmorphism UI effects, providing design background, accessibility considerations, and complete code examples for implementing these styles in modern web projects.
This article compares Flexbox and CSS Grid for creating grid‑style, backend admin, and responsive layouts, provides complete HTML/CSS code examples for each approach, discusses compatibility issues, and explains when to choose one technique over the other.
In Chrome 123 (2024) the CSS property align-content:center now provides native vertical centering for regular block elements, eliminating the need for Flex or Grid tricks, but it works only under specific layout conditions and has several edge‑case pitfalls.
This tutorial guides beginners through creating a complete user registration and login system using PHP for the backend, MySQL for data storage, and HTML, CSS, and vanilla JavaScript for the frontend, covering environment setup, database creation, form design, server‑side logic, and basic client‑side validation.
This article explores how to make text color automatically adapt to background brightness and how to let users freely customize theme colors while ensuring sufficient contrast, using JavaScript libraries, CSS blend modes, relative color functions, and contrast‑adjustment algorithms.
This article provides an in‑depth tutorial on CSS Grid layout, covering its advantages over Flexbox, compatibility, container setup, row and column definitions, sizing units, gaps, element positioning, naming conventions, area declarations, auto‑flow behavior, alignment properties, and automatic placement with numerous code examples.
This article explains the CSS rem unit, demonstrates how it relates to the root element's font size, and shows practical examples using vw and clamp() to create fluid, responsive typography across different screen sizes.
This article explains how to create a picture‑fragment animation by dividing an image into a grid of small blocks, using CSS background‑size and background‑position together with JavaScript to generate the blocks, apply delays, rotations, scaling, and performance‑optimising techniques.
This guide shows how to drop the heavyweight swiper.js library by using modern CSS features such as scroll‑snap, scroll‑timeline, timeline‑scope, and animation‑iteration to build a lightweight, performant carousel with custom indicators, autoplay, and cross‑browser fallbacks.
This tutorial demonstrates how to build a realistic snowfall animation on a web page by using CSS radial gradients for snowflakes and a JavaScript class that generates, styles, and animates thousands of snow particles with requestAnimationFrame, including advanced enhancements like speed variation, swing motion, 3D perspective, and rain integration.
This article explains the simple principle behind CSS sweep‑light animations and provides step‑by‑step code for three common scenarios—text, card containers, and irregular images—using linear gradients, background‑position animation, pseudo‑elements, and CSS masks.
This article explains several practical front‑end problems—including iOS border‑radius loss with transforms, text‑overflow truncation on iOS, Android button focus outlines, CSS coupon hole effects, clipboard API compatibility, UnoCSS style loss after bundling, and CORS OPTIONS request failures on low‑end devices—along with clear code‑based solutions.
This article explains why CSS borders set to 0.5px often appear as 1px on various devices, discusses browser rendering and device pixel ratio issues, and provides five practical solutions—including pseudo‑elements, shadows, SVG, and container tricks—to achieve sub‑pixel borders in H5 layouts.
This article explains the shortcomings of the native HTML title attribute for hover text and provides a step‑by‑step guide, with pure HTML/CSS/JavaScript and Vue examples, to create a customizable tooltip that only appears when the text overflows, improving both style and functionality.
This tutorial walks through building a realistic snowfall animation on a web page using HTML span elements, CSS radial gradients, and JavaScript classes to generate, style, animate, and recycle thousands of snowflakes with optional swing, speed variations, 3‑D perspective, and performance‑optimized transforms.
The article shows how to build a smooth, infinite 3D carousel using only CSS by sharing a common motion path, staggering items with negative animation delays, defining keyframes (including optional pauses), and optionally leveraging @property and @container style for smoother or declarative control, while noting browser compatibility and hover‑pause tips.
The article showcases advanced CSS capabilities—including fluid layouts with clamp, min, max and grid functions, new step functions like round, rem, and mod, versatile media queries, accent‑color and color‑scheme theming, custom counters, and variable‑driven animations—empowering developers to build responsive, modern, and performant web designs.
This article presents ten practical CSS snippets—ranging from content width limits and larger text to balanced headings and reduced motion—each explained with code examples and screenshots to help developers create cleaner, more accessible web pages.
This article explains the fundamentals of CSS variables, how to define and use them—including default values, nesting, media queries, and JavaScript updates—while showcasing practical scenarios such as theming, responsive design, code reuse, and compatibility across browsers.
This tutorial explains how to recreate Bilibili's mouse‑responsive top‑banner animation by collecting assets, constructing a layered HTML structure, applying CSS positioning, and writing vanilla JavaScript to track mouse movement, calculate element offsets, and animate the layers with smooth transitions.
This guide shows how to create an Element UI table in Vue whose columns are generated from a configurable array, using colgroup/col for layout, v‑for loops for headers and rows, sticky left/right columns, edit‑mode inputs, and dynamic scroll‑shadow effects for a flexible, high‑performance table component.
This article explains how to reproduce a website's fragmented shard animation by inspecting the original page, extracting clip‑path polygons with JavaScript, and building a reusable React component using Tailwind CSS transitions and delays, plus a custom drawing board for creating new shapes.
This article highlights the critical role of mastering CSS fundamentals—especially selectors, pseudo‑classes, pseudo‑elements, attribute and combinator selectors—by examining common coding mistakes, offering alternative pure‑CSS solutions, and emphasizing understanding over memorization for robust frontend development.
This article explains how to arrange tags of varying widths in a single line, detect when they exceed the container, and display the overflow count using only CSS features such as counters, view‑timeline animations, masks, and negative margins, without any JavaScript.
This tutorial explains how to create a lottery wheel in HTML5 by designing the turntable layout using CSS transforms, controlling rotation with JavaScript, managing click locks, applying easing for a smooth slowdown, and adjusting prize probabilities through weighted random selection, complete with full source code examples.
This article shows how to lock page scrolling when a modal is open by using the new CSS :has pseudo‑class—replacing JavaScript‑driven overflow toggles that fail with nested dialogs—and demonstrates a simple body:has(dialog[open]) selector that works across all modern browsers.
This tutorial explains how to build a glitch‑style clock animation in CSS by leveraging clip‑path, keyframe animations, random SCSS functions, and layered pseudo‑elements to achieve flickering, distortion, and color‑shift effects.
This article introduces Unocss, explains how to install and configure it with Vue and Sass, details common presets, transformers, and usage tips, and shares the author’s personal experiences and recommendations for adopting atomic CSS in frontend projects.
This article examines the performance differences between the atomic CSS engines unocss and Tailwind CSS, presenting benchmark tests on a MacBook M1 using Vite and PostCSS setups, analyzing build times, the impact of CSS AST parsing, and discussing practical implications for frontend development.
A customer reported that on an STM32F103VDT6, disconnecting the external 8 MHz crystal did not trigger the external watchdog reset because the MCU’s PLL continued to generate a low‑frequency clock, but enabling the Clock Security System (CSS) and handling the NMI correctly resolves the issue.
The guide outlines a direction‑based RTL adaptation workflow for web front‑ends—detecting language, setting the HTML dir attribute, using a lightweight helper, configuring postcss‑rtlcss (combined mode) to generate mirrored CSS, handling SSR and third‑party components, and providing a dev switch tool for seamless LTR/RTL support.
The article shows how using CSS Grid instead of nested Flex containers can halve the HTML and CSS needed for e‑commerce product cards by defining rows and columns, simplifying markup to a few elements while preserving layout for images, titles, prices, badges, and actions.
To create a tab interface with connected borders, recessed rounded corners, and smooth scrolling transitions, the article explains abandoning CSS due to background‑cover problems and instead using SVG paths that map the four corner vertices, employ arc commands for inner curves, dynamically update coordinates during scroll, and discusses the resulting performance and scalability trade‑offs.
This comprehensive guide explains 66 essential CSS functions—from basic attr() and var() to advanced color, filter, gradient, math, graphic, transform, layout, and animation timing functions—detailing their syntax, practical usage, and code examples so developers can create dynamic, responsive, and interactive web designs.
This article documents a step‑by‑step exploration of four native HTML/CSS/JS approaches to create an animated circular dashboard gauge on an H5 page, discusses the challenges encountered, and presents a final SVG‑based solution with code examples.
This article provides a detailed tutorial on implementing various modern web layout techniques—including horizontal‑vertical centering, equal‑height columns, sticky footers, equal‑distribution columns, the Holy Grail layout, 12‑column grids, justified spacing, and responsive sizing with clamp()—using CSS Flexbox and Grid with practical code examples.
Discover the best CSS frameworks for 2024—including Bootstrap, Tailwind, Foundation, Bulma, and UIkit—detailing their key features, integration methods, and code examples, to help developers choose the right toolkit for rapid, responsive, and maintainable front‑end design.
This article explains the three core CSS concepts—cascading, inheritance, and specificity—detailing how browsers resolve conflicting rules, the role of importance and source, selector weight calculations, the impact of rule order, and the use of keywords like !important, initial, inherit, revert, unset, and @layer to control styling.
This article explains the core concepts of CSS—cascade, inheritance, and specificity—detailing how browsers resolve conflicting style rules, the role of source order, importance, selector weight, and newer features like @layer, while providing practical code examples and visual illustrations.
This article surveys recent frontend and AI developments, explaining R&D efficiency, showcasing a Rust-powered frontend scaffolding tool, outlining six basic AI agent types for enterprise use, defining AIGC, and presenting practical CSS color‑adaptation and Antd style‑override techniques.
The article explains how a simple CSS mask‑image technique can replicate Bilibili's subtitle behavior that avoids covering on‑screen characters, providing a minimal HTML/CSS demo, visual results, and a caution about the experimental nature of the property.
This article introduces CSS Relative Color syntax, explains its core transformation functions, demonstrates practical examples such as generating green text from red, creating unified button hover/active colors, and adapting text color to any background using the new color‑contrast() function.
This tutorial demonstrates how to build a visually appealing login interface using HTML and CSS, featuring a dynamic water‑ripple effect, animated elements, and custom form styling to provide users with a refreshing login experience.
This article explains why the 100vh unit behaves incorrectly on mobile browsers, demonstrates several work‑arounds—including a CSS‑custom‑property script, -webkit-fill-available, postcss‑100vh‑fix—and shows the modern dvh unit that reliably creates full‑screen sections across all devices.
This tutorial walks a front‑end developer through building a fully functional Rolex‑inspired GMT‑MASTER watch with HTML, CSS and JavaScript by dividing the watch into dial, bezel and hand modules, initializing three canvas elements, defining color variables, and implementing drawing functions for the bezel, dial, hour, GMT, minute and second hands.
This article explains four different techniques—including pure JavaScript frame updates, setInterval with CSS transitions, CSS keyframe animation, and a text‑shadow trick—to achieve a continuously left‑scrolling text effect, compares their performance and complexity, and provides complete code samples for each method.
This article introduces several upcoming CSS specifications—including text-wrap with balance and pretty values, the @scope rule for scoped styling, form-sizing for auto‑resizing textareas, view‑transition for seamless page transitions, the light‑dark() function for theme‑aware colors, and native CSS nesting—explaining their purpose, usage, and browser support.
This article introduces several popular open-source CSS frameworks on GitHub, such as Bootstrap, Foundation, Bulma, Tailwind, UIkit, Milligram, Pure.css, and Tachyons, describing their features, usage, and repository statistics to help developers choose the right tool for efficient web design.
This article explains how to build a responsive waterfall (masonry) layout in React, covering the underlying principle of absolute positioning, dynamic column calculation, item placement based on column heights, lazy image loading, and provides the complete TypeScript component and CSS code.
This article reviews several noteworthy CSS design mistakes—such as the misuse of !important, confusing z-index behavior, margin collapse, ambiguous color functions, and naming of border‑radius—explaining why they are problematic and suggesting clearer alternatives for better front‑end development.
This article explains how to build a customizable Tabs component with a sticky header, click‑to‑scroll navigation, and collapsible content sections using React, CSS position:sticky, IntersectionObserver, and JavaScript, providing complete code examples and compatibility notes for modern web and mobile applications.
This article walks through a step‑by‑step pure‑CSS implementation of a Mid‑Autumn Festival greeting card, covering animated cloud backgrounds, a glowing cut‑out moon with text, flashing lanterns, moving clouds, and a running rabbit, while explaining the underlying CSS techniques and challenges.
This article examines the core front‑end technologies employed in JD’s Competition Ranking H5 page, covering animation implementations, style configuration, skin switching, poster generation, debugging tools, request handling, and deployment scripts, providing practical insights and code examples for front‑end developers.
This article walks through recreating the Genshin Impact character switch UI using Vue, detailing the horizontal avatar carousel, background image scaling animations, and touch‑based swipe handling for mobile, complete with code snippets and edge‑case logic.
This article walks through creating a responsive bottom navigation bar using semantic HTML, CSS flexbox layouts, Alibaba Iconfont vector icons, custom active-state styles, blur effects, a moving background circle, and JavaScript event handling to achieve smooth animated transitions.
This article explains how to create a responsive full‑screen scrolling effect using Vue 3, detailing the concept, requirements, underlying principles, and providing complete HTML, JavaScript, and CSS code to handle mouse wheel, touch events, dynamic height calculation, and indicator navigation.
This article explains how to create a functional video player for a website using PHP and MySQL, covering database design, PHP script to fetch video data, HTML structure for playback, and CSS styling to enhance the player’s appearance.
This short guide shows a regular‑expression rule for Fiddler that blocks common static resources such as CSS, JavaScript, images, icons and audio files, and provides a link to a Chinese‑language Fiddler localization package.
This article explains how to apply CSS ellipsis to truncate overflowing text, then use JavaScript—particularly the createRange API and temporary DOM measurements—to detect when truncation occurs and display a popper tooltip only on hover, comparing several practical implementation methods.
This article explains the CSS3 steps() timing function, contrasting it with linear animation, detailing its syntax, parameters, start/end behavior, and provides multiple practical demos—including frame-by-frame animations, typewriter effects, and countdown timers—while analyzing how steps divide animation segments and affect timing.
Bootstrap v5.3.1 has been released, introducing enhanced dark‑mode color contrast, updated component styles, new Sass variables, keyboard navigation improvements, and documentation upgrades such as homepage search and better responsive examples, along with various bug fixes.
This article explains how to implement a scrolling barrage effect with avatar fade‑in, size transition, and periodic data replacement, while optimizing network requests, using Vue slots, CSS animation timelines, requestAnimationFrame, and low‑end device fallbacks to achieve smooth performance.
This article explains how to create gradient iconfonts by using CSS background‑clip:text (with transparent text) and optionally mix‑blend-mode:darken, demonstrates a reusable React component that applies gradient backgrounds via style props, and shows graceful degradation with @supports queries for browsers lacking background‑clip support.
This article examines typical frontend development pitfalls—including numeric type quirks, precision loss, function length, object ordering, asynchronous timer inaccuracies, race conditions, CSS positioning, stacking contexts, performance bottlenecks, and compatibility concerns—providing explanations, code examples, and practical mitigation strategies for developers.
This article examines how enabling system-wide large‑font mode on Android and iOS can distort Webview layouts for driver‑focused apps, presents data on user font‑size usage, compares approaches from other apps, and offers practical CSS and code solutions to reliably disable or adapt to large fonts.
This article explores how modern frontend development separates UI into CSS extensions, behavior libraries, and style systems, compares Tailwind with Bootstrap, discusses the advantages of styled‑components and behavior‑only libraries like Radix‑UI, and offers guidance on building a custom component library with a personal style system.
This article shares practical frontend insights, from cultivating a problem‑solving mindset and three expert coding tips to using the new CSS Popover API and effective Node.js debugging, plus experiences with ChatGPT pair programming, the launch of WebContainer 1.0, and essential login‑form UX best practices.
This article explains how to improve CSS animation performance by understanding the browser rendering pipeline, using GPU‑accelerated transforms, avoiding costly properties and complex selectors, leveraging will‑change and requestAnimationFrame, and preferring CSS over JavaScript for smoother, lower‑latency visual effects.
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.
The DeWu Frontend Technology Salon in Hangzhou featured five expert talks covering SaaS frontend architecture evolution, one‑stop workbench upgrades, large‑scale CSS maintenance, container‑based e‑commerce workbench solutions, and stable ToG business strategies, followed by lively networking and group photos.
This tutorial walks you through downloading, installing, configuring, and launching Nginx on an old computer, adding a simple HTML page, and exposing the site to the internet using a free tunneling service, all with clear screenshots and code examples.
This guide explains multiple practical methods—including CSS tricks, saving the page, using the print view, and disabling JavaScript—to overcome copy‑and‑paste restrictions on web pages, complete with code examples and step‑by‑step instructions.
The 2022 State of CSS and State of JS surveys, which collected 14,310 CSS and 39,472 JavaScript responses, reveal demographic details, highlight rapidly adopted CSS features like flex gap, aspect‑ratio, and :has, showcase popular JavaScript language enhancements such as nullish coalescing and top‑level await, and expose developers' satisfaction, usage, and pain points across frameworks, tools, and browsers.
This article introduces the browser‑native CSS Custom Highlight API, explains its pseudo‑element ::highlight, shows how to create ranges and Highlight objects with JavaScript, and demonstrates practical examples such as custom text styling, rainbow text, live search highlighting, performance comparisons, and a lightweight code‑highlight editor.
This article details how to recreate the Flash programming game 'Manufactoria' as a web-based puzzle by implementing its UI with HTML and CSS and its logic with JavaScript, covering component definitions, grid layout, robot movement, state handling, level loading, and local storage persistence.
