Emmet: Vendor Prefixes and Fuzzy Matching

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

1. What You Will Learn

• Vendor prefix mechanism: a single -webkit- prefix triggers webkit + moz + standard 3-line expansion
• Explicit multi-prefix: -w-m- specifies only webkit + moz, avoiding unnecessary ms/o prefixes
• Emmet prefix letter quick reference: w = webkit, m = moz, s = ms, o = o
• Fuzzy matching principle: unknown abbreviations are matched to the closest predefined snippet name (bdrs → border-radius)
• Fuzzy matching in practice: ov-h → overflow: hidden;, tdn → text-decoration: none;
• Hyphenated property: shorthand and multi-value syntax for hyphenated property names (border-top, border-bottom)

2. A Frontend Developer's Real Story

(1) The Pain: CSS3 Cross-Browser Prefixes + Long Property Names

Alice was building rounded-corner cards for an e-commerce landing page. She wanted all modern browsers to support border-radius for rounded corners. The problem: browsers from 2015 still needed prefixes—

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

Three lines just to handle one border-radius property. Her design had 6 rounded corners (the card itself, buttons, images, badges, avatars, and card footer). At 3 lines each = 18 lines of pure copy-paste. Worse: different CSS3 properties have different prefix compatibility requirements—box-shadow needs 4 lines (webkit, moz, ms, o), while transform only needs 2. Alice kept mixing up which property needed how many prefixes.

Even worse were the long CSS3 property names: overflow: hidden; was needed frequently, and Alice had to type the full overflow (8 letters) every time; text-decoration: none; was even longer (15 characters for the property name alone). She might write these two properties 50 times a day, typing them in full each time—totaling 1,150 keystrokes. Alice thought: can CSS3 compatibility prefixes be expanded in one keystroke? Can long property names use short abbreviations?

(2) How Emmet Vendor Prefixes + Fuzzy Matching Solve It

Emmet's solution is two-part:

Vendor prefix mechanism: Add - before a CSS abbreviation, and Emmet auto-expands it into 3 lines of webkit/moz/standard compatible rules. Alice's rounded-corner abbreviation -bdrs8 expands into 3 lines in one go:

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

6 rounded corners go from 18 lines to 6 abbreviations—a 3x speed increase.

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

(3) Benefits

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

3. Vendor Prefix Mechanism: - Prefix Triggers 3-Line Expansion

CSS3 new properties (rounded corners, shadows, gradients, transforms) require writing vendor prefixes for different browser engines. Emmet makes this repetitive task a one-keystroke operation.

(1) Vendor Prefix Basics

Add a - prefix before a CSS abbreviation, and Emmet auto-expands it into 3 lines of compatible rules including webkit + moz + standard.

Key Point: Emmet defaults to including webkit (Chrome, Safari, new Opera) + moz (Firefox) + standard—3 lines total. This is based on the CSS vendor catalog (css.{vendor}Properties) configuration—border-radius exists in both the webkit and moz catalogs, so both prefixes are added. To get only a specific prefix version, use the explicit prefix syntax in section (3).

(2) How Auto-Prefixing Works

Emmet's vendor prefix mechanism is based on the css.autoInsertVendorPrefixes configuration (enabled by default). When enabled, all known CSS3 properties (in the vendor catalogs) auto-expand to 3-line compatible rules—the - prefix is not required for prefixing:

Tip: This is a convenience design—developers don't need to memorize "which properties need prefixes." bdrs8 and -bdrs8 produce the same expansion. However, explicitly adding - is clearer and more portable (it still works if the auto-prefix config is turned off).

(3) Explicit Prefix Specification: -w-m- Outputs Only the Specified Prefixes

To output only specific prefixes (e.g., only webkit + moz, without ms + o), use the -{letter}-{letter}-... explicit syntax:

(4) Prefix Letter Quick Reference

Emmet provides single-letter prefix abbreviations for shorter explicit specification:

Multiple prefixes are joined with -: w-m, w-m-s-o (webkit + moz + ms + o).

4. Fuzzy Matching: Smart Inference for Unknown Abbreviations

CSS has 200+ property names—memorizing them all is unrealistic. Emmet uses fuzzy matching to let you write short abbreviations that are inferred into long property names.

(1) Fuzzy Matching Principle

Emmet maintains a predefined CSS snippet dictionary (snippets.json). When the user types an abbreviation not directly defined in the dictionary, Emmet uses a fuzzy search algorithm to find the closest snippet name.

User types "bdrs"
  → Look up "bdrs" in snippets.json → not found
  → Launch fuzzy search → compare against all snippet names
  → Calculate similarity scores
  → "border-radius" scores highest (b-d-r-s matches 1-2 characters each from border-radius)
  → Output "border-radius" property

(2) Fuzzy Matching Practical Quick Reference

The most common "short abbreviation → long property" fuzzy matching pairs in Emmet:

Key Point: Fuzzy matching operates on predefined snippet names, not on CSS property names directly. This means the same abbreviation may have multiple candidates—Emmet picks the one with the highest similarity score. oh could match either overflow: hidden or outline: hidden, but Emmet selects based on priority.

(3) Hyphenated Property Shorthand

CSS has many hyphenated multi-word properties (border-top, border-bottom, text-decoration). Emmet's shorthand rules for hyphenated properties:

Tip: Multi-value syntax for hyphenated properties uses - as the separator (e.g., bdt-1-s-solid). But be careful to distinguish this from multi-value shorthand—bdt is the property (border-top), -1 is the value (1px), -s is the value (solid), so the final result is border-top: 1px solid;. # is the color separator, and #ccc is the color value—the same abbreviation can seamlessly mix property + multiple values + color.

5. Practical Examples

The following 4 examples cover the core scenarios of vendor prefixes + fuzzy matching + hyphenated properties.

▶ Example: Single Vendor Prefix -webkit-bdrs10 (Difficulty ⭐)

The most common vendor prefix—write webkit + moz + standard compatibility in one line.

Abbreviation:

-webkit-bdrs10

Expansion:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Output:

TEXT 📖 参照専用

📋 Copy

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

📋 Copy

▶ Example: Multiple Vendor Prefixes -w-m-bdrs10 (Difficulty ⭐⭐)

Explicitly specify only webkit + moz prefixes—avoiding unnecessary ms/o legacy prefixes.

Abbreviation:

-w-m-bdrs10

Expansion:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Output:

TEXT 📖 参照専用

📋 Copy

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

📋 Copy

▶ Example: Fuzzy Matching bdrs tdn ov-h (Difficulty ⭐⭐)

Three common long-property fuzzy matches—demonstrating Emmet's smart inference capability.

Abbreviation (3 independent expansions):

bdrs8

Expansion:

border-radius: 8px;

Abbreviation:

tdn

Expansion:

text-decoration: none;

Abbreviation:

ov-h

Expansion:

overflow: hidden;

Output:

TEXT 📖 参照専用

📋 Copy

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

📋 Copy

▶ Example: Hyphenated Property Shorthand bdt-1-s-solid bd-1-s-#ccc (Difficulty ⭐⭐)

Multi-value syntax for hyphenated properties—demonstrating that hyphens in abbreviations separate both properties and values.

Abbreviation:

bdt-1-s-solid

Expansion:

border-top: 1px solid;

Abbreviation:

bd-1-s-#ccc

Expansion:

border: 1px solid #ccc;

Output:

TEXT 📖 参照専用

📋 Copy

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

📋 Copy

6. Complete Example: CSS3 Card Style in One Line

Combine vendor prefixes, fuzzy matching, and hyphenated properties to write a complete CSS3 card style (with legacy browser compatibility).

▶ Example: CSS3 Card Compatible Style (Difficulty ⭐⭐)

Abbreviation:

-w-m-bdrs8 +bxs0-2-4-#0003 -bgs#fff w200 h200 m10-20 p16

Expansion:

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 2px 4px #00000033;
-moz-box-shadow: 0 2px 4px #00000033;
box-shadow: 0 2px 4px #00000033;
background: #fff;
width: 200px;
height: 200px;
margin: 10px 20px;
padding: 16px;

Output:

TEXT 📖 参照専用

📋 Copy

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

📋 Copy

❓ よくある質問

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

📖 まとめ

• Vendor prefixes: add - before an abbreviation to auto-expand webkit + moz + standard 3-line compatible rules (-bdrs8 → 3 lines)
• Auto-prefix: the css.autoInsertVendorPrefixes config is enabled by default; known CSS3 properties do not need - to get prefixes
• Explicit prefixes: -w-m- single-letter prefix specification (w=webkit, m=moz, s=ms, o=o)
• Fuzzy matching: operates on predefined snippet names (bdrs → border-radius, ov-h → overflow: hidden;)
• Hyphenated properties: bdt = border-top, bdb = border-bottom, bdl = border-left, bdr = border-right
• Mixed multi-value: bd-1-s-#ccc = border 1px solid gray; # acts as the color separator for seamless mixed-value concatenation

📝 練習問題

1. Basic (Difficulty ⭐): In a .css file, enter the 3 abbreviations -bdrs8, -bxs, -trf one by one, press Tab, and record the expansion results. Then rewrite them without - (as bdrs8, bxs, trf) and compare the 6 expansions (note: with css.autoInsertVendorPrefixes enabled by default, both should be identical).
2. Intermediate (Difficulty ⭐⭐): Write one Emmet line for a div's complete CSS3-compatible style. Requirements: (a) rounded corners 8px (compatible with webkit + moz); (b) shadow 0 2px 4px rgba(0,0,0,0.3) (using 4-character color #0003); (c) width 200px, height 200px; (d) margin 10px-20px (2 values). Record the expansion and verify that all compatibility lines include -webkit- and -moz- prefixes. QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

私たちについて