Temel araç seti için Web Platformu Kontrol Paneli'ni sorgulama

Jeremy Wagner

Yayınlanma tarihi: 4 Mart 2025

Baseline, Chrome ekibi tarafından oluşturuldu ve şu anda WebDX Community Group tarafından tanımlanıyor. Baseline, tarayıcılar arasında birlikte çalışabilen özelliklere netlik kazandırır. Tüm büyük tarayıcı motorlarında hangi özellikleri kullanabileceğinizi veya kullanamayacağınızı belirlemenize yardımcı olmak için tasarlanmıştır. Ancak bu özelliklerin neler olduğunu belirlemeniz gerekir.

Neyse ki web-features npm paketi tarafından desteklenen Web Platform Dashboard'u kullanarak hangi özelliklerin yeni veya yaygın olarak kullanılabildiğini sorgulayabilirsiniz. Ayrıca, Baseline verilerini araç iş akışınıza entegre etmek için HTTP API'sini kullanarak da bu bilgilere erişebilirsiniz. Bu kılavuzda nasıl yapılacağı açıklanmaktadır.

Web Platformu Kontrol Paneli'nin ilgili Baseline sorgu dilbilgisi

Web Platformu kontrol paneli, web özelliği desteğini aramanıza yardımcı olmak için belirli bir sorgu dilbilgisi kullanır. Bu sorgu gramerini doğrudan kontrol panelinde kullanabilirsiniz.

Sayfanın üst kısmındaki arama kutusuna yazarken, web özelliklerini filtrelemek için kullanabileceğiniz bir dizi sorgu parametresi gösterilir.

Sorgu dil bilgisi, gösterge tablosunda gösterilen web özelliklerini filtreleme konusunda size büyük bir esneklik sağlar. Aşağıdaki ekran görüntüsünde, id sorgu parametresinin belirli bir özelliği daraltmak için nasıl kullanılabileceği gösterilmektedir:

Sorgu grameri belgelenmiştir ancak özelliklerle ilgili temel verileri bulmak için tüm grameri bilmek gerekli değildir. Kontrol panelinde bu seçeneklerden herhangi birini kullanabilirsiniz. Ancak özellikle yararlı olan bazı seçenekler şunlardır:

• baseline_status: Özellikleri üç numaralandırılmış değere göre filtrelemek için bu parametreyi kullanın:
  • limited: Tarayıcı desteği sınırlı olan özellikleri döndürür. Bu değere göre filtreleme yaparsanız yalnızca herhangi bir temel durumuna ulaşmamış özellikler gösterilir.
  • newly: Baseline Newly Available (Temel olarak yeni kullanıma sunulan) özelliklerini döndürür.
  • widely: En az 30 aydır Baseline olan ve Baseline Widely Available özelliklerini döndürür. Bunlar, tarayıcı desteği veya polyfill'ler konusunda endişelenmeden kullanabileceğiniz özelliklerdir.
• baseline_date: Özelliklerin referans değere ulaştığı zaman için üst ve alt sınır belirtmek üzere YYYY-MM-DD..YYYY-MM-DD biçimini kullanır. Örneğin, bir yıl içindeki tüm özellikleri bulmak için 2024-01-01..2025-01-01 gibi bir değer kullanın.
• id: Belirli bir özelliğin tanımlayıcısı. Bu tanımlayıcılar, web-features paketinde tanımlanır. Örneğin, Promise.try() için özellik girişi, promise-try kimliğiyle eşlenir.
• group: Özellikler için birçok numaralandırılmış grup adından biri. Bu, yalnızca web platformu özelliklerinin belirli bir alt kümesi için sorgu oluşturmak istediğinizde kullanışlı bir ölçüttür. Örneğin, css değerine sahip CSS özelliklerinin listesini filtreleyebilirsiniz.

Kontrol paneli ön ucu kesinlikle faydalı olsa da doğrudan sorgulayabileceğiniz bir HTTP API'si üzerinde çalışır. Örneğin, yeni kullanıma sunulan tüm Baseline özelliklerini alan bir uç nokta aşağıda verilmiştir:

https://api.webstatus.dev/v1/features?q=baseline_status:newly

JSON yanıt yapısı

HTTP API'den aldığınız JSON yanıtı, her özellik için tutarlı bir şekle sahiptir. Döndürülen yanıtta üst düzeyde bir data özelliği var. Bu özellik, eşleşen tüm özelliklerin bir dizisini içerir. Bu, JSON yanıtında bulunan tüm alanların kapsamlı bir listesi olmasa da Baseline ile ilgili olarak yararlı olabilecek bazı alanları aşağıda bulabilirsiniz:

• baseline: Belirli bir özelliğin temel durumuna ilişkin genel bilgileri içerir. Aşağıdaki alt alanları içerir:
  • status: Bir özelliğin temel durumudur. Değerler limited, newly veya widely olabilir. Not: status değeri limited ise bu, tek alt alan olur.
  • low_date: Bu, söz konusu özelliğin Baseline Newly Available (Yeni Temel) olarak kullanıma sunulduğu tarihi gösterir. Bu alan yalnızca status değeri newly veya widely ise görünür.
  • high_date: Bu, söz konusu özelliğin Baseline Widely Available (Temel Geniş Kullanıma Açık) olarak kullanıma sunulduğu tarihi gösterir. Bu alan yalnızca status widely ise kullanılabilir.
• feature_id: Özelliğin kimliği. Örneğin, CSS ızgarası için bu değer "grid" olur.
• name: Özelliğin biçimlendirilmiş adı. Bu, bazı durumlarda feature_id ile benzer olabilir ancak genellikle farklıdır. Örneğin, Promise.try() için feature_id değeri "promise-try" iken aynı özelliğin name alanı "Promise.try()"'dir.
• spec: Bu alanda, spesifikasyonlara ve diğer kaynaklara yönelik bağlantı dizisi olan links adlı bir alt alan bulunur.

Genellikle belirli destekleyici tarayıcıların özelliği hangi sürümde uyguladığına dair bilgileri, Web Platform Testleri ile ilgili verileri ve önemseyebileceğiniz ya da önemsemeyebileceğiniz diğer şeyleri içeren başka alanlar da vardır.

Örnek sorgular

Kullanılabilir sorgu parametrelerinden bazıları hakkında kısa bir açıklama yaptıktan sonra, iş akışınız için faydalı olabilecek web durumu özelliklerini seçmek üzere araçlarınızda ve komut dosyalarınızda kullanabileceğiniz bazı örnek sorgulara göz atın.

Tek bir özellik için veri alma

API'ye alışmanın iyi bir yolu, tek bir web özelliği için veri alan temel bir örnekle başlamaktır.

// Specify and encode the query for a query string:
const query = encodeURIComponent('id:grid');

// Construct the URL:
let url = `https://api.webstatus.dev/v1/features?q=${query}`;

// Fetch the resource:
const response = await fetch(url);

if (response.ok) {
  // Convert the response to JSON:
  const { data } = await response.json();

  // Log data for each feature to the:
  console.log(data);
}

Bu durumda, Baseline Widely available olan CSS ızgarası için özellik desteği bilgilerini almak üzere id parametresini grid değeriyle belirtiyoruz. Örneğin, bu bilgileri özelliği kullanıp kullanmadıklarını tespit etmek ve kullanıcıları, destek konusunda endişelenmeden tüm modern tarayıcı motorlarında kullanabilecekleri konusunda bilgilendirmek için kullanabilirsiniz.

Ancak bu sadece bir başlangıçtır ve HTTP API, tek bir özellik için veri almanın çok ötesinde işler yapabilir.

Tüm Baseline Newly and Widely Available özelliklerini kullanma

Örneğin, Baseline Newly veya Widely kullanılabilen tüm özellikleri çeken bir komut dosyası oluşturmak istediğinizi varsayalım. Örneğin, belirli aralıklarla çalışan bir komut dosyanız varsa ve özellikler sınırlı sayıda kullanılabilirlik durumundan temel durumuna geçtikçe değişen güncellenmiş bir liste almak istiyorsanız bu özellikten yararlanabilirsiniz:

const query = encodeURIComponent('-baseline_status:limited');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);

if (response.ok) {
  const { data } = await response.json();

  console.log(data);
}

Bu sorgu, Baseline Newly and Widely available özelliklerinin tümünü değil, yalnızca ilk 100'ünü alır. Alınan özelliklerin sayısı bunu aşarsa JSON yanıtının üst düzeyinde, en fazla iki alt alan içerebilen bir metadata alanı bulunur:

• next_page_token: Arka uca yönelik GET isteğinin sorgu dizesine ekleyebileceğiniz bir jeton içeren dize. Bu işlevi kullandığınızda ve webstatus.dev arka ucundan verileri yeniden getirdiğinizde, eşleşen özelliklerin bir sonraki grubu döndürülür. Not: Bu alan, geçerli sorgu 100'den az sonuç döndürürse veya geçerli sorgu sonuç kümesinin sonunda yer alıyorsa kullanılamaz.
• total: Geçerli sorgu için kullanılabilen toplam özellik sayısını gösteren bir tam sayı.

Bu alanlar, sayfalara ayırma için yararlıdır. Bu bilgilerle, çok miktarda veri döndüren bir sorgunun tüm sonuçlarını almak için aşağıdaki kodu deneyebiliriz:

async function queryWebStatusDashboard (query, token) {
  const urlBase = 'https://api.webstatus.dev/v1/features?q=';
  let queryUrl = `${urlBase}${encodeURIComponent(query)}`;

  if (token) {
    queryUrl += `&page_token=${encodeURIComponent(token)}`;
  }

  const response = await fetch(queryUrl);

  if (response.ok) {
    const { data, metadata } = await response.json();

    console.log(data);

    // See if there's a page token in this query:
    if ('next_page_token' in metadata) {
      const { next_page_token } = metadata;
      queryWebStatusDashboard(query, next_page_token);
    } else {
      console.log('All results collected');
    }
  }
}

// Make the first query, and if there are more
// than 100 entries, the function will run
// recursively until all features are fetched
queryWebStatusDashboard('-baseline_status:limited');

Tüm Baseline Newly available CSS özelliklerini kullanma

CSS'ye özel olarak odaklanan bir mühendis olduğunuzu ve hangi CSS özelliklerinin Baseline Newly available features (Temel Yeni Kullanıma Sunulan Özellikler) haline geldiğini öğrenmek istediğinizi varsayalım. Bu, group sorgu değeri için mükemmel bir kullanım alanıdır. Ayrıca, webstatus.dev'e sorgu gönderirken AND operatörünü kullanma şekli de gösterilir:

const query = encodeURIComponent('baseline_status:newly AND group:css');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);

if (response.ok) {
  const { data } = await response.json();

  console.log(data);
}

group için css değeri belirtirken, yeni kullanıma sunulan tüm temel özellikler için sorgu oluşturabilirsiniz. Kapsamı, Baseline Widely available CSS özelliklerini de içerecek şekilde genişletmek isterseniz son kod örneğindeki yaklaşımı kullanabilir ve -baseline_status:limited AND group:css' gibi bir sorguyla olumsuzlama operatörünü kullanabilirsiniz.

Sorgulayabileceğiniz bir diğer alan da snapshot alanıdır. Bu alan, belirli bir ECMAScript özellikler grubunun parçası olan JavaScript özelliklerini bulmak için kullanışlıdır. Aşağıdaki kod, ecmascript-2023 anlık görüntüsünün parçası olan tüm Baseline Newly available özelliklerini kontrol eder:

const query = encodeURIComponent('baseline_status:newly AND snapshot:ecmascript-2023');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);

if (response.ok) {
  const { data } = await response.json();

  console.log(data);
}

Belirli bir tarih aralığındaki tüm Baseline özelliklerini kullanma

Belirli bir tarih aralığında Baseline olan tüm özellikleri bulmak için baseline_date alanı sorgulanabilir:

const query = encodeURIComponent('baseline_status:widely AND baseline_date:2022-01-01..2022-12-31 AND group:css');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);

if (response.ok) {
  const { data } = await response.json();

  console.log(data);
}

Yukarıdaki kod örneği, 2022'de herhangi bir noktada Baseline Widely kullanılabilir hale gelen CSS özelliklerini sorgular. baseline_date için sorgu söz dizimi, .. ile ayrılmış bir başlangıç ve bitiş tarihi belirtmenize olanak tanır.

Sonuç

Bu rehberdeki sorgular, webstatus.dev arka ucuna nasıl sorgu göndereceğinizi denemeye başlamanız için bir başlangıç noktası olarak tasarlanmıştır. Kullanılabilir sorgu parametrelerinin sayısı ne olursa olsun, uygulamanıza özel sonuçlar elde edebilirsiniz.

Web Platformu Kontrol Paneli'nin HTTP API'sine nasıl sorgu göndereceğinizi bilmek, işinizde faydalı olabilecek araçlar oluşturmanıza ve projenizde kullanmak istediğiniz özelliklerin yeterli düzeyde tarayıcı desteği olup olmadığı konusunda bilgi sahibi olmanıza olanak tanır. Bu sayede, güvenle kullanabileceğiniz modern tarayıcı özelliklerini kullanarak web uygulamaları oluşturabilir ve çok daha keyifli bir geliştirici deneyimi sunabilirsiniz.