Yayın tarihi: 12 Eylül 2025
Baseline için yeni araçlar, web uygulamalarınızda hangi web özelliklerinin güvenle kullanılabileceğini belirlemenize yardımcı olur. Linter'lar ve IDE özellikleri gibi bu araçlar, modern tarayıcılarda destekleriyle ilgili verileri içeren bir web platformu özellikleri veri kaynağı kullanır.
Web Platform Status Dashboard, bu özellikler için bir veri kaynağıdır ve sorgulanabilir bir HTTP API sağlar. Bu veri kaynağının isteğe bağlı olarak sorgulanması tüm araçlar için pratik değildir. Birçok araç kullanım alanında, web-features npm paketi, yerel olarak kullandığınız web özelliği verilerinin daha güvenilir ve pratik bir sürümüdür. Bu kılavuzda, kendi Baseline araçlarınızı geliştirmek için web-features paketini nasıl kullanacağınız gösterilmektedir.
web-features paketini kullanmaya başlama
Öncelikle paketi projenize bağımlılık olarak yükleyin:
npm install web-features
Yüklendikten sonra, web-features paketinden bir veya daha fazla adlandırılmış dışa aktarma işlemini projenize aktarın:
import { features, groups, browsers, snapshots } from 'web-features';
Hedeflerinize bağlı olarak bu dışa aktarma işlemlerinin hepsine ihtiyacınız olmayabilir. Bu dışa aktarma işlemleri aşağıdaki bilgileri sağlar:
features: Her nesnenin bir web özelliğini temsil ettiği nesne dizisi. En sık kullanacağınız dışa aktarma türü budur.browsers: Tarayıcıları açıklayan bir nesne dizisi.groups: Özelliklerin mantıksal gruplandırmasını tanımlayan bir nesne dizisi. Bunlar, hedefiniz CSS ve JavaScript gibi web platformu özelliklerinin bir alt kümesini hedeflemekse ve daha spesifik gruplandırmalar yapmaksa kullanışlıdır.snapshots: ES2023, ES2022 ve diğer ECMAScript sürümleri gibi ilgili JavaScript özelliklerinin ECMAScript sürümlerini içerir.
Özellik dışa aktarma, temel araçlar oluşturmak için aşağıdaki özellikleri sağlar:
id: Özelliğin benzersiz tanımlayıcısı. Örneğin, CSS Izgara'nın tanımlayıcısı"grid"'dır. Not: Bu, veri nesnesindeki bir özellik değildir. Bu, nesne anahtarıdır.compat_features: Özelliğe dahil edilen tek tek BCD anahtarlarının dizisi.name: Özelliğin adının kullanıcılar tarafından okunabilen dizesi (ör."Container Queries").description: Özelliğin kısa açıklaması.group: Özelliğin ait olduğu grup. Bu,groupsdışa aktarma işleminde bulunan grup verilerine karşılık gelir.baseline: Özelliğin temel durumu. Bu, üç değerden biri olabilir:false: Özelliğin durumu "Sınırlı kullanılabilirlik"tir."low": Bu özellik, Baseline Newly Available (Yeni Kullanıma Sunulan Temel Özellik) olarak sınıflandırılır."high": Bu özellik, Baseline Widely'de kullanılabilir.baseline_high_date: Özelliğin Baseline Widely olarak kullanıma sunulduğu tarih. Not: Bu özellik, Baseline Widely Available değilse kullanılamaz.baseline_low_date: Özelliğin Baseline Newly'de kullanıma sunulduğu tarih. Not: Bu özellik, sınırlı kullanılabilen özellikler için geçerli değildir.
Aşağıdaki örnek, CSS alt ızgarası özelliğinin tam veri nesnesidir:
"subgrid": {
"caniuse": "css-subgrid",
"compat_features": [
"css.properties.grid-template-columns.subgrid",
"css.properties.grid-template-rows.subgrid"
],
"description": "The subgrid value for the grid-template-columns and grid-template-rows properties allows a grid item to inherit the grid definition of its parent grid container.",
"description_html": "The <code>subgrid</code> value for the <code>grid-template-columns</code> and <code>grid-template-rows</code> properties allows a grid item to inherit the grid definition of its parent grid container.",
"group": "grid",
"name": "Subgrid",
"spec": "https://drafts.csswg.org/css-grid-2/#subgrids",
"status": {
"baseline": "low",
"baseline_low_date": "2023-09-15",
"support": {
"chrome": "117",
"chrome_android": "117",
"edge": "117",
"firefox": "71",
"firefox_android": "79",
"safari": "16",
"safari_ios": "16"
}
}
}
groups dışa aktarma işlemi, aşağıdaki yapıya sahip özellik gruplandırmalarıyla ilgili veriler sağlar:
id: Grubun benzersiz tanımlayıcısı. Örneğin, CSS özelliklerinin kimliği"css"dir. Not: Bu, gruplar nesnesindeki bir özellik değildir. Nesne anahtarının kendisidir.name: Grubun kullanıcılar tarafından okunabilen adı.parent: Grubun üst grubunun kimliği. Bu özellik, grubun üst grubu yoksa kullanılamaz.
Örnekler
Aşağıdaki örneklerde, temel araçlar oluşturmak için ihtiyacınız olan verileri almak üzere web-features package simgesinin nasıl kullanılacağı gösterilmektedir.
Belirli bir özelliğin temel durumunu arama
import { features } from 'web-features';
function getBaselineStatus (featureId) {
return features[featureId]?.status.baseline;
}
Bu örnek, web-features paketinin en doğrudan kullanım alanını temsil eder. Bu örnekte, status.baseline mülkünde kullanılabilen temel verilerini almak için bir özelliğin kimliğini belirtirsiniz. Bu özellik, bir özelliğin sınırlı kullanılabilirliğe sahip olup olmadığını, yeni kullanıma sunulup sunulmadığını veya yaygın olarak kullanılıp kullanılmadığını gösterir. Son iki durumda, özelliğin belirli bir temel eşiğe ulaştığı tarihleri de görebilirsiniz.
Belirli bir BCD anahtarının temel durumunu arama
BCD, browser-compat-data anlamına gelir. Bu proje, tarayıcılardaki özellik desteğini kataloglamak için MDN tarafından yönetilir. Bir BCD anahtarı, belirli bir CSS özelliği değeri veya spesifikasyon tarafından tanımlanan davranışsal bir alt özellik gibi ayrıntılı bir özelliğe karşılık gelir.
web-features proje grupları, ilgili BCD anahtarlarını her özellik için compat_features dizisine yerleştirir. Bazen, özelliğin tamamı için genel Temel Durum yerine bir BCD anahtarının Temel Durum'una ihtiyacınız olur. Örneğin, bir CSS linter oluşturuyorsanız ve bir özellik-değer çiftinin büyük tarayıcılarda uyumlu olup olmadığını bilmeniz gerekiyorsa özellik düzeyindeki veriler çok kaba olur. Bunun nedeni, paketin her özelliği bileşen BCD anahtarlarının tümünde toplaması ve bazı anahtarların diğerlerinden daha iyi tarayıcı desteğine sahip olmasıdır.
Bir BCD anahtarının temel durumunu aramak için özellik nesnesinin status.by_compat_key özelliğini inceleyin (web-features 3.6.0 ve sonraki sürümlerde kullanılabilir):
import { features } from 'web-features';
function getBaselineStatus (featureId, bcdKey) {
return features[featureId]?.status.by_compat_key[bcdKey];
}
Örneğin, getBaselineStatus('outline', 'css.properties.outline') komutunun çıkışı şöyledir:
{
"baseline": "low",
"baseline_low_date": "2023-03-27",
"support": {
"chrome": "94",
"chrome_android": "94",
"edge": "94",
"firefox": "88",
"firefox_android": "88",
"safari": "16.4",
"safari_ios": "16.4"
}
}
Özellikleri temel durumlarına göre sıralama
Bu örnek, özellikler nesnesindeki her özelliği yineler ve her birini Temel Durumuna göre bir dizide sıralar.
import { features } from "web-features";
const webFeatures = Object.values(features);
const widelyAvailable = webFeatures.filter(feature => {
return feature.status.baseline === 'high';
});
const newlyAvailable = webFeatures.filter(feature => {
return feature.status.baseline === 'low';
});
const limitedAvailability = webFeatures.filter(feature => {
return feature.status.baseline === false;
});
Bu örnekte, aracınızda status.baseline özelliğiyle nasıl çalışacağınız gösterilmektedir. Örneğin, bu yaklaşımı bir web uygulamasında, tüm web özelliklerinin Baseline durumuna göre listesini göstermek için kullanabilirsiniz.
Bir gruptaki tüm özellikleri bulma
Şimdiye kadar gösterilen tüm örneklerde features dışa aktarma işlemi kullanıldı ancak groups dışa aktarma işlemi tüm özellikleri gruplar içinde mantıksal olarak düzenler. Örneğin, görünüm geçişlerinin bir parçası olan tüm özellikleri bulabilirsiniz:
import { features, groups } from 'web-features';
const groupKeys = Object.keys(groups);
const featuresData = Object.values(features);
const viewTransitionsGroup = groupKeys.find(groupKey => {
return groupKey === 'view-transitions';
});
const viewTransitionsFeatures = featuresData.filter(feature => {
return feature.group === viewTransitionsGroup;
});
features ve group dışa aktarma işlemleri arasındaki kesişim, web özelliklerini ait oldukları gruba göre aramanızı daraltmanıza olanak tanır.
Özet
Aramaları kullanarak faydalı araçlar oluşturabilirsiniz. Örneğin, CSS linter oluşturabilirsiniz.
CSS linters; at-rules, sözde öğeler, özellikler ve özellik-değer çiftlerini değerlendirir. Temel linter'ınız için her jetonun durumunu üst özelliğiyle değil, BCD anahtarıyla arayın.
CSSTree gibi bir ayrıştırıcı, CSS'yi belirteçlere ayırır ve stil sayfasını soyut söz dizimi ağacına (AST) dönüştürür. Aşağıdaki örnekte, genel sınıf seçici ve stil bildirimi kullanan bir CSS kuralı gösterilmektedir:
.foo {
word-break: auto-phrase;
}
AST aşağıdaki gibi görünür:
{
"type": "StyleSheet",
"children": [
{
"type": "Rule",
"prelude": {
"type": "SelectorList",
"children": [
{
"type": "Selector",
"children": [
{
"type": "ClassSelector",
"name": "foo"
}
]
}
]
},
"block": {
"type": "Block",
"children": [
{
"type": "Declaration",
"important": false,
"property": "word-break",
"value": {
"type": "Value",
"children": [
{
"type": "Identifier",
"name": "auto-phrase"
}
]
}
}
]
}
}
]
}
AST'de ilerlerken bir özellik bildirimi bulduğunuzda, temel durumunu kontrol etmek için bu özellik adını karşılık gelen BCD anahtarıyla eşleyin. BCD, CSS özelliklerini css.properties nesnesi altında sınıflandırır. Bu nedenle, ilgili BCD anahtarı css.properties.word-break olur.
Ardından, bu BCD anahtarıyla ilişkili özelliği bulup durumunu arayın.
// Assuming we only know the BCD key and not the feature ID.
const bcdKey = 'css.properties.word-break';
const [featureId, feature] = Object.entries(features).find(([id, feature]) =>
feature.compat_features?.includes(bcdKey)
) || [];
const status = feature?.status.by_compat_key[bcdKey];
word-break mülkünün temel durumu aşağıdaki gibidir:
{
"baseline": "high",
"baseline_high_date": "2018-03-30",
"baseline_low_date": "2015-09-30",
"support": {
"chrome": "44",
"chrome_android": "44",
"edge": "12",
"firefox": "15",
"firefox_android": "15",
"safari": "9",
"safari_ios": "9"
}
}
"high" Temel durum, özelliğin yaygın olarak kullanılabildiğini gösterir. Bu nedenle, linter'ınızın uyarı vermesi gerekmez. Ardından, mülkün değerini inceleyin.
AST, bu özelliğin değerinin auto-phrase olduğunu gösteriyor. İlgili BCD anahtarını almak için değeri üst özelliğin BCD anahtarına ekleyin: css.properties.word-break.auto-phrase.
Bu durumda, web-features, word-break: auto-phrase özellik-değer çiftinin durumunun Temel Olmadığını gösterir:
{
"baseline": false,
"support": {
"chrome": "119",
"chrome_android": "119",
"edge": "119"
}
}
Bu linter örneğindeki bilgileri kullanarak geliştiriciyi bu özellik-değer çiftinin Baseline olmadığı konusunda uyarın. Bu uyarı, geliştiricinin büyük tarayıcı motorlarında beklenen şekilde çalışmayacağını bilmesini sağlar.
Gerçek hayattan örnekler
Önceki örneklerde web-features paketinin temel kullanımları gösterilmektedir. Bu verilerden yararlanan birçok araç zaten mevcuttur. Örneğin:
eslint-css, belirli özellikler için lint işlemi yapmak üzereuse-baselinekuralındaweb-featurespaketini kullanır.- Visual Studio Code'daki fareyle üzerine gelme kartları, CSS özellikleri ve HTML özellikleri için Baseline bilgilerini göstermek üzere
web-featurespaketini kullanır. - MDN, Baseline durumunu bildirmek için çoğu özellik sayfasındaki (ör.
abs()) banner'lardakiweb-featuresverilerini kullanır.
Bu veri kaynağının temel araçlar oluşturmak için nasıl kullanılabileceğine dair daha fazla örnek vardır. Projenizin de bu örneklerden biri olmasını umuyoruz.