Temel çizgiyi Browserslist ile kullanma

Tony Conway
Tony Conway
LinkedIn

Yayınlanma tarihi: 7 Mayıs 2025

Browserslist, ön uç kod tabanlarında desteklenen minimum tarayıcı sürümlerini yapılandırmayla ilgili en popüler araçlardan biridir. Geliştiriciler package.json dosyalarına bir browserslist sorgusu ekler ve Browserslist, minimum desteklenen tarayıcıların listesini gösterir. Browserslist, aşağıdakiler gibi çeşitli popüler linting, polyfilling ve paketleme araçlarıyla kullanılabilir:

Referans hedefler

Referans çizgisini kullanmaya karar verdiğinizde kullanıcı tabanınızı göz önünde bulundurmalı ve hangi referans çizgisi özellik grubunu hedeflemek istediğinize karar vermelisiniz:

  • Geniş kapsamlı olarak sunulan temel sürüm, 30 veya daha fazla ay önce temel sürüm ana tarayıcı grubu tarafından tam olarak desteklenen tüm web özelliklerini içerir.
  • Referans yıl özellik kümeleri (ör. Referans Yılı 2020), belirtilen yılın sonunda Yeni kullanıma sunulan tüm özellikleri içerir.

Kullanıcı tabanınıza bağlı olarak, geniş kapsamlı temel hattı hedefleyebilir veya daha eski bir temel hat yılı hedeflemeniz gerekebilir. Kullanıcılarınızın hangi tarayıcı sürümlerini kullandığını öğrenmek için analizlerinize veya RUM araçlarınıza bakın.

browserslist-config-baseline uygulamasını yükle

Hangi temel özellik grubunu hedeflemek istediğinize karar verdikten sonra bu hedefi geliştirici araçlarınıza uygulayabilirsiniz. browserslist kullanan tüm araçlarda bunu yapmanın en basit yolu browserslist-config-baseline'i yüklemektir:

# npm
npm i browserslist-config-baseline@latest -D

# yarn
yarn add --latest browserslist-config-baseline -D

# bun
bun add browserslist-config-baseline@latest -d

Geniş kapsamlı olarak kullanılabilen taban çizgiyi hedefleme

Geniş kapsamlı olarak kullanıma sunulan temel hattı hedeflemek için extends anahtar kelimesini kullanarak package.json'te bir browserlist yapılandırmasını güncelleyin veya ekleyin:

{
  ...
  "browserslist": [
    "extends browserslist-config-baseline"
   ]
  ...
}

browserslist, desteklenen tarayıcılar listesini yüklediğinde browserslist-config-baseline, şu anda geniş çapta kullanılabilen tüm özellikleri destekleyen mevcut minimum tarayıcı sürümlerini dinamik olarak oluşturur. extends browserslist-config-baseline dosyasını .browserslistrc dosyasına da ekleyebilirsiniz. Bu dosya da aynı şekilde işlenir.

Referans yıllarını hedefleme

Bir referans yılı özellik grubunu hedeflemek istiyorsanız browserslist sorgunuzun sonuna bir / ve YYYY biçiminde yılı ekleyin:

"browserslist": "extends browserslist-config-baseline/2020"

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

Temel ana tarayıcı grubuna Chrome, Edge, Firefox ve Safari dahildir. Diğer tarayıcılar, Chrome ve Edge ile aynı açık kaynak kodunu (Chromium) temel alır ve kullandıkları Chromium sürümünün aynı özellik grubunu desteklemelidir.

browserslist-config-baseline, tarayıcı sürümlerini destekledikleri özellik gruplarıyla ilişkilendirmek için baseline-browser-mapping kullanır. UC Browser mobil ve QQ Browser mobil için eşlemeler baseline-browser-mapping'te kullanılabilir. Diğer tarayıcılar gelecekte dahil edilebilir.

Bu tarayıcıları temel yapılandırmanıza dahil etmek için browserslist yapılandırmanızdaki modül adından hemen sonra /with-downstream ekleyin:

"browserslist": "extends browserslist-config-baseline/with-downstream"

veya:

"browserslist": "extends browserslist-config-baseline/with-downstream/2020"

browserslist-config-baseline'ün kullanıldığı örnekler

Paketleme araçlarında

browserslist-config-baseline'ü deponuza eklemek hemen etki gösterebilir. Babel, JavaScript'i paketlemek için kullanılan popüler bir derleme aracıdır. @babel/preset-env paketi 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 dizimi ile değiştirilir:

npm run build komutunun test.js adlı bir JavaScript dosyasında çalıştırıldığını gösteren bir terminal oturumu. Çıkış dosyası boyutu 12 kilobayttır.

Ancak browserslist-config-baseline parametresini aynı örnek projede 2020 Temel Çizgisi'ni hedefleyecek şekilde ayarladığınızda, daha az söz dizimi dönüştürme işlemi gerektiğinden bu JavaScript'in çıkış boyutu önemli ölçüde azalır:

Babel, 2020 Temel Çizgisi'ni hedeflemek üzere ayarlandığında npm run build komutunun artık 1,5 kilobaytlık bir dosya oluşturduğunu gösteren ikinci bir terminal oturumu.

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

Lint araçlarında

Bazı linterler zaten Browserslist ile çalışır veya uyumluluk modülü kullanılarak Browserslist ile çalışacak şekilde ayarlanabilir. Örneğin, stylelint, stylelint-browser-compat modülünü kullanarak bir browserslist yapılandırmasını kullanabilir. stylelint.config.js dosyanızı browserslist-config-baseline kullanacak şekilde ayarlayın:

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

Stylelint, şu anda yaygın olarak kullanılan temel CSS'nin parçası olmayan CSS'leri işaretleyecektir:

Eski tarayıcılarda çalışmayan CSS kodlarını vurgulayan Stylelint uyarılarının listesi.

Stylelint, temel kurallarını doğrudan ayarlamanıza olanak tanıyan bir eklenti de sağlar. Ancak yapılandırmanızı yönetmek için zaten browserslist kullanıyorsanız browserslist-config-baseline, hazır bir çözümdür.

browserslist-config-baseline'e katkıda bulunma

browserslist-config-baseline için özellik isteği göndermek istiyorsanız deposunda sorun kaydı oluşturun veya pull isteği gönderin.

Daha fazla yayın sonrası tarayıcı verisi sağlamak veya veri sorunu bildirmek istiyorsanız baseline-browser-mapping deposunda sorun veya çekme isteği oluşturun.