Temel çizgiyi Browserslist ile kullanma

Tony Conway

Jeremy Wagner

Yayınlanma tarihi: 7 Mayıs 2025, Son güncelleme tarihi: 17 Eylül 2025

Browserslist, ön uç kod tabanlarında desteklenen minimum tarayıcı sürümlerini yapılandırmak için en popüler araçlardan biridir. Geliştiriciler, package.json dosyalarına (veya Browserslist için diğer yapılandırma noktalarına, örneğin .browserslistrc dosyası) bir browserslist sorgusu ekler ve Browserslist, desteklenen minimum tarayıcıların listesini gösterir. Browserslist; aşağıdakiler de dahil olmak üzere çok çeşitli popüler linting, polyfilling ve paketleme araçlarıyla kullanılabilir:

• Autoprefixer
• @babel/preset-env kullanarak Babel
• postcss-preset-env kullanarak PostCSS
• eslint-plugin-compat kullanarak ESLint
• stylelint-no-unsupported-browser-features kullanarak Stylelint
• webpack

Temel hedefler

Baseline'ı kullanmaya karar verdiğinizde kullanıcı tabanınızı göz önünde bulundurmalı ve hangi Baseline özellik grubunu hedeflemek istediğinize karar vermelisiniz:

• Baseline Widely available, 30 ay veya daha uzun süre önce Baseline çekirdek tarayıcı grubu tarafından tam olarak desteklenen tüm web özelliklerini içerir.
• Temel yıl özellik kümeleri (ör. Baseline 2020), belirtilen yılın sonunda yeni kullanıma sunulan tüm özellikleri içerir.

Kullanıcı tabanınıza bağlı olarak, geniş çapta kullanılabilen temel sürümü hedefleyebilir veya daha eski bir temel sürümü hedeflemeniz gerekebilir. Kullanıcılarınızın hangi tarayıcı sürümlerini kullandığını öğrenmek için analiz veya RUM araçlarınıza bakın.

Baseline Newly veya Widely available'ı hedefleme

Baseline desteği, Browserslist'e birkaç farklı sorgu aracılığıyla yerleştirilmiştir. Yeni kullanıma sunulan temel tarayıcıları hedeflemek istiyorsanız Browserslist yapılandırmanızda baseline newly available değerini belirtmeyi deneyin:

{
  ...
  "browserslist": [
    "baseline newly available"
   ]
  ...
}

baseline widely available öğesini sorgu olarak da belirtebilirsiniz:

{
  ...
  "browserslist": [
    "baseline widely available"
   ]
  ...
}

Referans Değeri yıllarını hedefleme

Temel yıl özellik grubunu hedeflemek istiyorsanız sorguda yılı belirtirsiniz. Örneğin, 2024 özellik grubunu hedeflemek istiyorsanız baseline 2024 sorgusunu kullanırsınız:

"browserslist": "baseline 2024"

baseline 2015 yılından geçerli yıla kadar olan yılları belirtebilirsiniz.

Aşağı akış tarayıcıları nasıl belirtilir?

Temel çekirdek tarayıcı grubu Chrome, Edge, Firefox ve Safari'yi içerir. Diğer tarayıcılar, Chrome ve Edge ile aynı açık kaynak koduna (Chromium) dayanır ve uyguladıkları Chromium sürümüyle aynı özellik setini destekler. Bu tarayıcıları Baseline yapılandırmanıza dahil etmek için Baseline sorgunuzun sonuna with downstream ekleyin. Örneğin, Baseline Widely available kapsamında aşağı akış tarayıcılarını hedeflemek için baseline widely available with downstream değerini belirtin:

"browserslist": "baseline widely available with downstream"

baseline newly available with downstream da geçerli bir sorgudur. Yıllık hedeflere with downstream eklemek de geçerli bir sorgudur:

"browserslist": "baseline 2024 with downstream"

Referans sorguların kullanımına dair örnekler

Paketleme araçlarında

Projenizde Browserslist'in sunduğu Baseline sorgularını kullanmak anında etkili olabilir. Babel, JavaScript'i paketlemek için kullanılan popüler bir derleme aracıdır. @babel/preset-env paket varsayılanlarını kullanırsanız birçok modern JavaScript API'si ve yöntemi, eski tarayıcıların gerektirdiği daha ayrıntılı söz dizimiyle değiştirilir:

Ancak aynı örnek projede 2020 özellik grubunu hedeflemek için baseline 2020 sorgusunu kullanmak, daha az söz dizimi dönüşümü gerektiğinden bu JavaScript'in çıkış boyutunu önemli ölçüde azaltır:

Google Chrome Labs baseline-demos deposundaki örnek kodu kullanarak kendiniz deneyin.

Lint araçlarında

Bazı linter'lar zaten Browserslist ile çalışır veya uyumluluk modülü kullanılarak Browserslist ile çalışabilir. Örneğin, stylelint, stylelint-browser-compat modülünü kullanarak browserslist yapılandırmasını kullanabilir. stylelint.config.js dosyanızı, istediğiniz referans değeri sorgusunu kullanacak şekilde ayarlayın:

module.exports = {
  plugins: ['stylelint-browser-compat'],
  rules: {
    'plugin/browser-compat': [
      true,
      {
        browserslist: ['baseline widely available'],
      },
    ],
  },
};

Stylelint artık şu anda Baseline Widely available'ın bir parçası olmayan CSS'yi işaretleyecek:

Stylelint, doğrudan Baseline kurallarını ayarlamanıza olanak tanıyan bir eklenti de sunar. Ancak yapılandırmanızı işlemek için zaten Browserslist kullanıyorsanız Browserslist'in sunduğu yerleşik Baseline sorgularını kullanmak da uygun bir çözümdür.