BestHub
Sign in
Tagged articles

css

474 articles · Page 4 of 5
Yuewen Frontend Team
Yuewen Frontend Team
May 26, 2021 · Frontend Development

Master Vertical Text Layout: Writing‑mode, Text‑orientation & Text‑combine‑upright

This article walks through implementing vertical text layouts using CSS writing-mode, ensuring numeric characters stay upright with text-orientation, and optimizing date displays by horizontally merging characters via text-combine-upright, while sharing practical code snippets, browser compatibility tips, and alternative solutions for front‑end developers.

csstext-combine-uprighttext-orientation
0 likes · 10 min read
Master Vertical Text Layout: Writing‑mode, Text‑orientation & Text‑combine‑upright
ByteFE
ByteFE
May 11, 2021 · Frontend Development

Leveraging CSS @property (Houdini) for Advanced Animations and Custom Property Control

This article introduces the CSS @property at‑rule, explains how it extends the Houdini API to define typed custom properties with defaults and inheritance, and demonstrates a series of practical animations—including gradient transitions, conic‑gradient pie charts, length‑based underline effects, and a full‑screen saver—by rewriting traditional CSS with @property definitions and showcasing the required code snippets.

HoudiniPropertyanimation
0 likes · 13 min read
Leveraging CSS @property (Houdini) for Advanced Animations and Custom Property Control
JavaScript
JavaScript
May 11, 2021 · Frontend Development

What’s New in Bootstrap 5? Key Features and Improvements Explained

Bootstrap 5 has officially launched with its first stable 5.0.0 release, introducing a redesigned logo, dropping support for older browsers, removing jQuery, updating to Popper V2, enhancing dropdowns, modals, tooltips, adding new components like offcanvas, accordion, tables, RTL support, a revamped utility API, and numerous performance and grid layout improvements.

BootstrapJavaScriptUI framework
0 likes · 3 min read
What’s New in Bootstrap 5? Key Features and Improvements Explained
ITPUB
ITPUB
May 8, 2021 · Frontend Development

From Static Pages to Server‑Side Rendering: A 30‑Year Journey of Web Technology

This article traces the evolution of web technologies from Tim Berners‑Lee's first static page in 1991 through the rise of HTML, CSS, JavaScript, dynamic server‑side solutions like PHP and AJAX, the emergence of SPAs, and modern innovations such as SSR, React Server Components, and Web Components, highlighting key milestones, challenges, and future directions.

HTMLJavaScriptNode.js
0 likes · 17 min read
From Static Pages to Server‑Side Rendering: A 30‑Year Journey of Web Technology
ByteFE
ByteFE
Apr 23, 2021 · Frontend Development

Curated Technical Articles: Node.js 16 Release, Frontend Performance, CSS @property, WebRTC, Game Development, and More

This roundup presents a selection of recent technical articles covering the Node.js 16 release, front‑end performance optimizations, CSS @property advances, WebRTC transport protocols, game‑engine dark‑mode implementation, Babel deep‑dive, and a new Flutter‑based web rendering engine, each linked for further reading.

FlutterFrontendGame Development
0 likes · 4 min read
Curated Technical Articles: Node.js 16 Release, Frontend Performance, CSS @property, WebRTC, Game Development, and More
政采云技术
政采云技术
Apr 20, 2021 · Frontend Development

Deep Dive into CSS Selectors: Types, Usage, and Priority

This article provides a comprehensive analysis of CSS selectors, covering their classification, detailed usage of various selector types, and the calculation of selector priority with practical examples.

FrontendPriorityPseudo-elements
0 likes · 14 min read
Deep Dive into CSS Selectors: Types, Usage, and Priority
ELab Team
ELab Team
Apr 16, 2021 · Frontend Development

Mastering Frosted‑Glass Blur: 4 CSS/JS Techniques and Common Pitfalls

This article explains four ways to achieve frosted‑glass blur effects on the web—using CSS filter, backdrop‑filter, SVG, and canvas—detailing their characteristics, compatibility, implementation code, and typical pitfalls developers may encounter.

blurcssfilter
0 likes · 9 min read
Mastering Frosted‑Glass Blur: 4 CSS/JS Techniques and Common Pitfalls
ELab Team
ELab Team
Apr 1, 2021 · Frontend Development

From CSS Modules to Tailwind: Solving Large-Scale Frontend Styling Challenges

The article examines the evolution of CSS for large projects, compares CSS Modules, CSS‑in‑JS, and Tailwind CSS, highlights their benefits and drawbacks, and provides practical code examples and design‑token strategies for modern component‑based front‑end development.

CSS ModulesCSS-in-JSTailwind
0 likes · 11 min read
From CSS Modules to Tailwind: Solving Large-Scale Frontend Styling Challenges
ByteFE
ByteFE
Mar 31, 2021 · Frontend Development

Advanced CSS Performance Optimization Techniques for Faster Web Rendering

This article explains a collection of modern CSS strategies—including content‑visibility, will‑change, contain, font‑display, scroll‑behavior, GPU‑accelerated animations, stylesheet splitting, @import avoidance, and CSS custom properties—to dramatically improve page rendering speed and user experience.

FrontendRenderingWeb Development
0 likes · 26 min read
Advanced CSS Performance Optimization Techniques for Faster Web Rendering
Taobao Frontend Technology
Taobao Frontend Technology
Mar 23, 2021 · Frontend Development

How to Supercharge Web Rendering with CSS content-visibility, will-change & contain

This article explains how modern CSS features such as content-visibility, will-change, contain, font-display, scroll-behavior, @import avoidance, media‑query splitting, and CSS custom properties can be used together with practical code examples to dramatically reduce page‑render time, improve smooth scrolling, and avoid layout shifts for faster, smoother web experiences.

Content-VisibilityPerformancecontain
0 likes · 27 min read
How to Supercharge Web Rendering with CSS content-visibility, will-change & contain
ByteFE
ByteFE
Mar 14, 2021 · Frontend Development

Exploring @property and Its Animating Powers

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.

Custom PropertiesPropertyanimation
0 likes · 25 min read
Exploring @property and Its Animating Powers
ByteFE
ByteFE
Mar 11, 2021 · Frontend Development

Exploring CSS @property: Type Checking, Animations, and Creative Uses

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.

PropertyType Checkinganimation
0 likes · 11 min read
Exploring CSS @property: Type Checking, Animations, and Creative Uses
Alibaba Terminal Technology
Alibaba Terminal Technology
Feb 24, 2021 · Frontend Development

Why CSS-in-JS Is Revolutionizing Frontend Development: History, Patterns, and Future

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.

CSS-in-JSDesign PatternsHoudini
0 likes · 19 min read
Why CSS-in-JS Is Revolutionizing Frontend Development: History, Patterns, and Future
Alibaba Cloud Developer
Alibaba Cloud Developer
Feb 10, 2021 · Frontend Development

Why CSS-in-JS Is Revolutionizing Modern Frontend Development

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.

CSS-in-JSDesign PatternsHoudini
0 likes · 19 min read
Why CSS-in-JS Is Revolutionizing Modern Frontend Development
DevOps Cloud Academy
DevOps Cloud Academy
Jan 20, 2021 · Operations

Customizing Jenkins UI with Custom CSS and Themes

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.

Continuous IntegrationJenkinsTheme
0 likes · 3 min read
Customizing Jenkins UI with Custom CSS and Themes
ByteFE
ByteFE
Jan 20, 2021 · Frontend Development

Achieving overflow:hidden Effects Without Using overflow:hidden in CSS

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.

clip-pathcontaincss
0 likes · 10 min read
Achieving overflow:hidden Effects Without Using overflow:hidden in CSS
Yuewen Frontend Team
Yuewen Frontend Team
Jan 19, 2021 · Frontend Development

How to Build a Pure CSS Star Rating with input type="range"

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.

Frontendcross‑browsercss
0 likes · 10 min read
How to Build a Pure CSS Star Rating with input type="range"
Sohu Tech Products
Sohu Tech Products
Jan 13, 2021 · Frontend Development

CSS Scroll Snap: A Comprehensive Guide to Creating Smooth Scrollable Containers

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.

Web Developmentcssresponsive design
0 likes · 12 min read
CSS Scroll Snap: A Comprehensive Guide to Creating Smooth Scrollable Containers
Taobao Frontend Technology
Taobao Frontend Technology
Jan 7, 2021 · Frontend Development

Unveiling the Secrets of CSS: From Its Origins to Modern Mastery

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.

FrontendLayoutStyling
0 likes · 52 min read
Unveiling the Secrets of CSS: From Its Origins to Modern Mastery
Sohu Tech Products
Sohu Tech Products
Jan 6, 2021 · Mobile Development

Mobile Adaptation Techniques for Vue.js Development

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.

FrontendVue.jscss
0 likes · 19 min read
Mobile Adaptation Techniques for Vue.js Development
KooFE Frontend Team
KooFE Frontend Team
Jan 6, 2021 · Frontend Development

Why CSS Logical Properties Are the Future of Responsive Layouts

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.

Logical PropertiesWeb Layoutcss
0 likes · 6 min read
Why CSS Logical Properties Are the Future of Responsive Layouts
Beike Product & Technology
Beike Product & Technology
Dec 19, 2020 · Frontend Development

Master Mobile H5 Layout: 5 Proven Adaptation Techniques Explained

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.

Flexboxcssmobile layout
0 likes · 26 min read
Master Mobile H5 Layout: 5 Proven Adaptation Techniques Explained
phodal
phodal
Nov 30, 2020 · Frontend Development

Automate CSS Refactoring with Lemonj: A TypeScript‑Powered Analyzer

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.

Frontend toolingLemonjTypeScript
0 likes · 5 min read
Automate CSS Refactoring with Lemonj: A TypeScript‑Powered Analyzer
Ctrip Technology
Ctrip Technology
Nov 26, 2020 · Frontend Development

Responsive Design: Benefits, Challenges, and Practical Implementation at Ctrip

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.

SSRWeb Developmentcss
0 likes · 9 min read
Responsive Design: Benefits, Challenges, and Practical Implementation at Ctrip
Yuewen Frontend Team
Yuewen Frontend Team
Nov 16, 2020 · Frontend Development

Build a Lightweight Carousel with CSS Scroll‑Snap and Minimal JavaScript

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.

CarouselFrontendJavaScript
0 likes · 7 min read
Build a Lightweight Carousel with CSS Scroll‑Snap and Minimal JavaScript
Sohu Tech Products
Sohu Tech Products
Nov 11, 2020 · Frontend Development

Low‑Cost Dark Mode Implementation Using Pure CSS :checked, +/~ Selectors and Filter Functions

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.

Pure CSScssdark-mode
0 likes · 12 min read
Low‑Cost Dark Mode Implementation Using Pure CSS :checked, +/~ Selectors and Filter Functions
Sohu Tech Products
Sohu Tech Products
Nov 4, 2020 · Frontend Development

Creating a Pure‑CSS Escape‑Room Game

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.

Escape RoomGame DevelopmentHTML
0 likes · 6 min read
Creating a Pure‑CSS Escape‑Room Game
Code Ape Tech Column
Code Ape Tech Column
Oct 26, 2020 · Frontend Development

How to Customize Hexo’s Next Theme: A Complete Step‑by‑Step Guide

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.

blog themingcssfrontend customization
0 likes · 18 min read
How to Customize Hexo’s Next Theme: A Complete Step‑by‑Step Guide
Aotu Lab
Aotu Lab
Oct 22, 2020 · Frontend Development

Master CSS Animations: From Simple Transitions to Advanced SVG Loading Effects

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.

SVGanimationcss
0 likes · 13 min read
Master CSS Animations: From Simple Transitions to Advanced SVG Loading Effects
Alibaba Cloud Developer
Alibaba Cloud Developer
Oct 19, 2020 · Frontend Development

Explore 24 Cutting‑Edge CSS Features from LondonCSS 2020 – Motion Blur, Scroll‑Timeline, Subgrid & More

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.

CSS AnimationsNew CSS FeaturesWeb Development
0 likes · 42 min read
Explore 24 Cutting‑Edge CSS Features from LondonCSS 2020 – Motion Blur, Scroll‑Timeline, Subgrid & More
Top Architect
Top Architect
Sep 29, 2020 · Frontend Development

9 Popular Open‑Source CSS Frameworks for Building Beautiful Front‑Ends

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.

Open‑SourceWeb Developmentcss
0 likes · 7 min read
9 Popular Open‑Source CSS Frameworks for Building Beautiful Front‑Ends
政采云技术
政采云技术
Sep 27, 2020 · Frontend Development

Writing High‑Quality Maintainable Code: A Guide to Clear Annotations

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.

HTMLVS Code extensionscode comments
0 likes · 16 min read
Writing High‑Quality Maintainable Code: A Guide to Clear Annotations
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Sep 9, 2020 · Frontend Development

Understanding Font Metrics and Vertical Alignment for Accurate CSS Vertical Centering

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.

Font MetricsFrontendTypography
0 likes · 16 min read
Understanding Font Metrics and Vertical Alignment for Accurate CSS Vertical Centering
Wukong Talks Architecture
Wukong Talks Architecture
Aug 10, 2020 · Frontend Development

How to Modify Typora's Theme Style

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.

FrontendMarkdownTheme
0 likes · 3 min read
How to Modify Typora's Theme Style
21CTO
21CTO
Aug 6, 2020 · Frontend Development

10 Must-Have Front-End Tools Every Web Developer Should Try

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.

JavaScriptToolsWeb Development
0 likes · 4 min read
10 Must-Have Front-End Tools Every Web Developer Should Try
Taobao Frontend Technology
Taobao Frontend Technology
Jul 20, 2020 · Frontend Development

Unlock Modern CSS Layouts: Centering, Grid, Flexbox, and Responsive Techniques

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.

FlexboxGridLayout
0 likes · 27 min read
Unlock Modern CSS Layouts: Centering, Grid, Flexbox, and Responsive Techniques
Alibaba Cloud Developer
Alibaba Cloud Developer
Jul 20, 2020 · Frontend Development

Master Modern CSS Layouts: Centering, Grids, Flexbox, and More

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.

FlexboxGridWeb Layout
0 likes · 25 min read
Master Modern CSS Layouts: Centering, Grids, Flexbox, and More
Tencent Cloud Developer
Tencent Cloud Developer
Jul 17, 2020 · Frontend Development

Creating a Stunning Countdown Timer and Real‑Time Interactive Mini‑Program for Massive Online Events

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.

FrontendHigh concurrencyReal-time
0 likes · 15 min read
Creating a Stunning Countdown Timer and Real‑Time Interactive Mini‑Program for Massive Online Events
Aotu Lab
Aotu Lab
Jul 7, 2020 · Frontend Development

How to Compute Precise Angled Linear Gradient Coordinates for Canvas Text

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.

Canvascssgradient-calculation
0 likes · 4 min read
How to Compute Precise Angled Linear Gradient Coordinates for Canvas Text
WeDoctor Frontend Technology
WeDoctor Frontend Technology
Jun 22, 2020 · Frontend Development

Master CSS Grid: From Basics to Advanced Layout Techniques

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.

CSS GridHTMLcss
0 likes · 16 min read
Master CSS Grid: From Basics to Advanced Layout Techniques
Laravel Tech Community
Laravel Tech Community
Jun 19, 2020 · Frontend Development

Bootstrap 5 Alpha Released: Major Changes and New Features

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.

BootstrapFrontendJavaScript
0 likes · 6 min read
Bootstrap 5 Alpha Released: Major Changes and New Features
vivo Internet Technology
vivo Internet Technology
Jun 3, 2020 · Frontend Development

Behavior-Preset Dynamic Layout for Full-Screen Pages

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.

Dynamic ScalingFrontendcss
0 likes · 18 min read
Behavior-Preset Dynamic Layout for Full-Screen Pages
58UXD
58UXD
May 28, 2020 · Frontend Development

Mastering Web Font-Family: Ensure Consistent Typography Across Platforms

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.

EmojiUI designcss
0 likes · 10 min read
Mastering Web Font-Family: Ensure Consistent Typography Across Platforms
360 Quality & Efficiency
360 Quality & Efficiency
May 22, 2020 · Frontend Development

Front-End Optimization Techniques: ES6 Syntax, JavaScript Array Methods, and CSS Performance Tips

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.

FrontendJavaScriptPerformance
0 likes · 6 min read
Front-End Optimization Techniques: ES6 Syntax, JavaScript Array Methods, and CSS Performance Tips
Programmer DD
Programmer DD
Apr 6, 2020 · Frontend Development

How to Turn Your Website Grayscale with Simple CSS Tricks

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.

FrontendHTMLStyling
0 likes · 3 min read
How to Turn Your Website Grayscale with Simple CSS Tricks
Liangxu Linux
Liangxu Linux
Apr 5, 2020 · Frontend Development

Turn Any Website Gray with a Simple CSS Filter

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.

FrontendWeb Developmentbrowser compatibility
0 likes · 8 min read
Turn Any Website Gray with a Simple CSS Filter
DevOps Cloud Academy
DevOps Cloud Academy
Mar 31, 2020 · Operations

Customizing Jenkins UI with Custom CSS and Themes

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.

CI/CDJenkinsTheme
0 likes · 2 min read
Customizing Jenkins UI with Custom CSS and Themes
政采云技术
政采云技术
Mar 8, 2020 · Frontend Development

Everything You Should Know About vertical-align

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.

FrontendHTMLLayout
0 likes · 18 min read
Everything You Should Know About vertical-align
Alibaba Terminal Technology
Alibaba Terminal Technology
Feb 27, 2020 · Frontend Development

Mastering Dark Mode: CSS & JavaScript Techniques for Seamless Light/Dark Switching

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.

JavaScriptaccessibilitycss
0 likes · 25 min read
Mastering Dark Mode: CSS & JavaScript Techniques for Seamless Light/Dark Switching
Taobao Frontend Technology
Taobao Frontend Technology
Feb 19, 2020 · Frontend Development

Mastering Dark Mode: CSS & JavaScript Techniques for Modern Web Design

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.

JavaScriptWeb Developmentcss
0 likes · 25 min read
Mastering Dark Mode: CSS & JavaScript Techniques for Modern Web Design
政采云技术
政采云技术
Jan 12, 2020 · Frontend Development

Understanding CSS Background Property: Basics, Advanced Techniques, and Practical Examples

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.

BackgroundGradientscss
0 likes · 15 min read
Understanding CSS Background Property: Basics, Advanced Techniques, and Practical Examples
Programmer DD
Programmer DD
Dec 31, 2019 · Frontend Development

Why Your WeChat Articles Turn Dark and How to Force Light Mode in Chrome

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.

Chromecssdark-mode
0 likes · 5 min read
Why Your WeChat Articles Turn Dark and How to Force Light Mode in Chrome
Programmer DD
Programmer DD
Dec 18, 2019 · Frontend Development

How to Compress and Use Custom Chinese Web Fonts with Font‑Spider‑Plus

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.

@font-faceWeb fontscss
0 likes · 12 min read
How to Compress and Use Custom Chinese Web Fonts with Font‑Spider‑Plus
政采云技术
政采云技术
Dec 15, 2019 · Frontend Development

How to Write CSS Elegantly in React

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.

CSS ModulesCSS-in-JSNamespaces
0 likes · 11 min read
How to Write CSS Elegantly in React
WecTeam
WecTeam
Nov 22, 2019 · Frontend Development

Top Frontend Insights: Nginx Tricks, CSS Rendering, Visual Editors & More

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.

FrontendNGINXVisual Editor
0 likes · 6 min read
Top Frontend Insights: Nginx Tricks, CSS Rendering, Visual Editors & More
360 Tech Engineering
360 Tech Engineering
Nov 1, 2019 · Frontend Development

Understanding the CSS display Property and Its Two‑Value Syntax

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.

DisplayFlexFrontend
0 likes · 5 min read
Understanding the CSS display Property and Its Two‑Value Syntax
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Oct 10, 2019 · Frontend Development

Mastering CSS Class Naming: From Chaos to BEM and Beyond

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.

BEMBest PracticesFrontend
0 likes · 15 min read
Mastering CSS Class Naming: From Chaos to BEM and Beyond
AutoHome Frontend
AutoHome Frontend
Oct 9, 2019 · Frontend Development

How to Add Skeleton Screens in Vue for Faster Perceived Load Times

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.

PerformanceRoutingSkeleton Screen
0 likes · 6 min read
How to Add Skeleton Screens in Vue for Faster Perceived Load Times
政采云技术
政采云技术
Sep 18, 2019 · Frontend Development

Vue‑Based Image Magnifier Implementation

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.

Image MagnifierJavaScriptVue
0 likes · 10 min read
Vue‑Based Image Magnifier Implementation
360 Tech Engineering
360 Tech Engineering
Aug 26, 2019 · Frontend Development

Master CSS Blend Modes: From Basics to Stunning Visual Effects

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.

BackgroundBlend ModeFrontend
0 likes · 10 min read
Master CSS Blend Modes: From Basics to Stunning Visual Effects
Xueersi Online School Tech Team
Xueersi Online School Tech Team
Jun 14, 2019 · Frontend Development

Understanding Browser Rendering Process and Performance Optimization Techniques

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.

FrontendPerformancebrowser
0 likes · 36 min read
Understanding Browser Rendering Process and Performance Optimization Techniques
Didi Tech
Didi Tech
Apr 4, 2019 · Frontend Development

Customizing Project Logos and Login Backgrounds with a Webpack Merge Loader

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.

Front-endbuildcss
0 likes · 10 min read
Customizing Project Logos and Login Backgrounds with a Webpack Merge Loader
360 Tech Engineering
360 Tech Engineering
Apr 2, 2019 · Frontend Development

Development Guide for the 360 AI Speaker Official Website

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.

FrontendHTMLJavaScript
0 likes · 13 min read
Development Guide for the 360 AI Speaker Official Website
Qunar Tech Salon
Qunar Tech Salon
Mar 26, 2019 · Frontend Development

Guide to Using CSS Next (postcss‑cssnext) with Webpack for Modern Front‑End Styling

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.

FrontendPreprocessorVariables
0 likes · 8 min read
Guide to Using CSS Next (postcss‑cssnext) with Webpack for Modern Front‑End Styling
Qunar Tech Salon
Qunar Tech Salon
Mar 8, 2019 · Frontend Development

Introduction to PostCSS and Developing Custom Plugins

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.

csslesspostcss
0 likes · 8 min read
Introduction to PostCSS and Developing Custom Plugins
网易UEDC
网易UEDC
Mar 4, 2019 · Frontend Development

Turning Designer‑Written Code into Seamless Front‑End Animations for NetEase Music’s 2018 Listening Report

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.

FrontendSVGae2css
0 likes · 12 min read
Turning Designer‑Written Code into Seamless Front‑End Animations for NetEase Music’s 2018 Listening Report
UC Tech Team
UC Tech Team
Feb 1, 2019 · Frontend Development

CSS and JS Are at War – How to Stop It

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.

CommunityFrontendJavaScript
0 likes · 6 min read
CSS and JS Are at War – How to Stop It
AutoHome Frontend
AutoHome Frontend
Jan 14, 2019 · Frontend Development

12 Must‑Know CSS Fixes for Common Layout Pitfalls

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.

FrontendLayoutWeb Development
0 likes · 14 min read
12 Must‑Know CSS Fixes for Common Layout Pitfalls
360 Tech Engineering
360 Tech Engineering
Jan 3, 2019 · Frontend Development

How CSS Calculates the Display Size of Images – A Complete Guide

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.

FrontendHTMLWeb Development
0 likes · 9 min read
How CSS Calculates the Display Size of Images – A Complete Guide
CSS Magic
CSS Magic
Dec 27, 2018 · Frontend Development

Season 2, Episode 1: Quick CSS Q&A and Front‑End Career Tips

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.

Chromecssrem
0 likes · 7 min read
Season 2, Episode 1: Quick CSS Q&A and Front‑End Career Tips
UC Tech Team
UC Tech Team
Dec 14, 2018 · Frontend Development

Bootstrap 3.4.0 Released: New Features, Fixes, and Documentation Updates

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.

BootstrapFrontendJavaScript
0 likes · 6 min read
Bootstrap 3.4.0 Released: New Features, Fixes, and Documentation Updates
AutoHome Frontend
AutoHome Frontend
Dec 12, 2018 · Frontend Development

Mastering CSS Scroll: 7 Essential Properties and How to Use Them

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.

FrontendWeb Developmentcss
0 likes · 5 min read
Mastering CSS Scroll: 7 Essential Properties and How to Use Them
UC Tech Team
UC Tech Team
Dec 4, 2018 · Frontend Development

The Power of CSS Selectors

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.

BEMOOCSSSelectors
0 likes · 4 min read
The Power of CSS Selectors
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Nov 21, 2018 · Frontend Development

Unlock Advanced CSS Shadow Tricks: From Single‑Side to 3D Effects

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.

Frontendbox-shadowcss
0 likes · 16 min read
Unlock Advanced CSS Shadow Tricks: From Single‑Side to 3D Effects
JD Tech
JD Tech
Nov 1, 2018 · Frontend Development

Responsive Layout Techniques Using CSS Viewport Units, Media Queries, and JavaScript

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.

FrontendLayoutViewport Units
0 likes · 9 min read
Responsive Layout Techniques Using CSS Viewport Units, Media Queries, and JavaScript
21CTO
21CTO
Oct 21, 2018 · Frontend Development

How to Kickstart a Front-End Development Career: Practical Roadmap

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.

CareerFrontendHTML
0 likes · 8 min read
How to Kickstart a Front-End Development Career: Practical Roadmap
UC Tech Team
UC Tech Team
Oct 15, 2018 · Frontend Development

Understanding the CSS content Property and Its Limitations with ::before and ::after

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.

Pseudo-elementsWeb Developmentcontent property
0 likes · 3 min read
Understanding the CSS content Property and Its Limitations with ::before and ::after