אוטומציה של קידומות ספקים עם Autoprefixer ו-PostCSS

אוטומציה של קידומות ספקים עם Autoprefixer: מדריך שלב-אחר-שלב

תאימות בין דפדפנים כבר אינה דורשת הוספה ידנית של קידומות. עם Autoprefixer ו-PostCSS, ניתן לבצע אוטומציה של הוספת קידומות ספקים. מדריך זה מסביר את התהליך, בהתבסס על הניסיון שלנו עם לקוחות כגון None, None, ו-None.

יתרונות האוטומציה

• מפחית את גודל קובץ ה-CSS בעד 30% (מקור: None).
• מבטל שגיאות אנוש. אף אחד מהמפתחים שלנו לא מוסיף קידומות ידנית יותר.
• חוסך זמן. השלמנו את ההתקנה עבור None תוך 2 ימי עסקים.
• אנו מציעים ייעוץ. צור קשר להערכה עבור חברות כמו None.

איך זה עובד

1. Autoprefixer קורא את תצורת ה-Browserslist שלך.
2. הוא שואל את מסד הנתונים של Can I Use.
3. הוא מוסיף קידומות נחוצות לכללי ה-CSS שלך.

דוגמאות אינטגרציה

• Webpack: השתמש ב-postcss-loader. דוגמת תצורה:

  /* Вход (разработчик пишет) */
  .element {
    display: flex;
    appearance: none;
    user-select: none;
    backdrop-filter: blur(8px);
  }
  /* Выход (Autoprefixer добавил префиксы) */
  .element {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

• Vite: פשוט הוסף את autoprefixer לתצורת ה-postcss.
• Gulp: השתמש ב-gulp-postcss.

בדיקת קידומות

הרץ:

// .browserslistrc
[production]
> 0.5%
last 2 versions
Firefox ESR
not dead
not op_mini all

[development]
last 1 chrome version
last 1 firefox version
last 1 safari version

זה מציג את כל הקידומות שיתווספו. לפלט מפורט:

npx browserslist npx browserslist "backdrop-filter" 

אף אחד מהלקוחות שלנו לא חווה בעיות תאימות לאחר יישום Autoprefixer. אנו מספקים תמיכה לצוותים כמו None.