<link>: Dış Kaynak Bağlantısı öğesi

This translation is incomplete. Please help translate this article from English

HTML Dış Kaynak Bağlantısı öğesi (<link>) geçerli belge ile harici kaynak arasındaki ilişkileri belirtir. Bu eleman en çok stylesheets bağlantısına kullanılır, ancak site simgeleri (hem "favicon" stil ikonları hem de ana ekran için simgeler ve mobil cihazlardaki uygulamalar) oluşturmak için de kullanılır.

Harici bir stil sayfasını bağlamak için, <head> içine şu şekilde bir <link> öğesi ekleyin:

<link href="main.css" rel="stylesheet">

Bu basit örnek, href özniteliği ve stylesheet değerine sahip bir rel özniteliğindeki stil sayfasının yolunu sağlar. rel "ilişki" anlamına gelir ve büyük olasılıkla <link> öğesinin temel özelliklerinden biridir - değer, bağlandığı öğenin bağlantıyla nasıl belge içeren ilişkilendirildiğini gösterir. Bağlantı türleri referansımızdan göreceğiniz gibi, birçok farklı ilişki türü vardır.

Karşılaştığınız başka yaygın türler de var. Örneğin, sitenin favicon'una bir bağlantı:

<link rel="icon" href="favicon.ico">

Çeşitli mobil platformlarda kullanım için özel simge türlerini belirtmek için kullanılan, örneğin rel değerleri olan başka bir simge vardır;

<link rel="apple-touch-icon-precomposed" sizes="114x114"
      href="apple-icon-114.png" type="image/png">

sizes niteliği simge boyutunu belirtirken, type bağlanan kaynağın MIME türünü içerir. Bunlar, tarayıcının mevcut en uygun ikonu seçmesine izin vermek için faydalı ipuçları sunar.

Ayrıca bir media özniteliği içinde bir ortam türü veya sorgu da sağlayabilirsiniz; bu kaynak daha sonra yalnızca ortam koşulu doğru olduğunda yüklenir. Örneğin:

<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">

Bazı ilginç yeni performans ve güvenlik özellikleri de <link&gt öğesine eklendi. Bu örneği ele alalım:

<link rel="preload" href="myFont.woff2" as="font"
      type="font/woff2" crossorigin="anonymous">

rel ve preload değeri, tarayıcının bu kaynağı önceden yüklemesi gerektiğini belirtir (bkz. rel="preload" içeriği önceden yükleme) ile daha fazla ayrıntı için), as niteliği, getirilen belirli bir içerik sınıfını gösterir. crossorigin niteliği, kaynağın bir CORS isteği ile alınıp alınmayacağını belirtir.

Diğer kullanım notları:

  • Bir <link> öğesi, bağlantı türü olup olmadığına bağlı olarak, <head> veya <body> body-ok olan öğesinde oluşabilir. Örneğin, stylesheet bağlantı türü body-ok'dur ve bu nedenle gövdede <link rel="stylesheet"> izin verilir. Ancak, bu izlenecek iyi bir uygulama değildir; <link> öğelerinizi gövde içeriğinizden ayırmak, bunları <head> içine yerleştirmek daha mantıklı olur.
  • Bir siteye favicon oluşturmak için <link> kullanırken siteniz güvenliğini artırmak için bir İçerik Güvenliği Politikası (CSP) kullanıyorsa, politika favicon'a uygulanır. Yüklenmeyen favicon ile ilgili sorunlarla karşılaşırsanız, Content-Security-Policy başlığının img-src yönergesi buna erişimi engellemiyor.
  • HTML ve XHTML özellikleri, <link> öğesi için olay işleyicilerini tanımlar, ancak bunların nasıl kullanılacağı açık değildir.
  • XHTML 1.0 altında, <link> gibi boş öğeler sonda eğik çizgi gerektirir: <link />.
  • WebTV, rel için next değerinin bir sonraki sayfada bir belge dizisinde önyüklenmesini destekler.

Öznitelikler

Bu öğe genel özellikleri içerir.

as
Bu özellik yalnızca <link> öğesinde rel="preload" veya rel="prefetch" ayarlanmışsa kullanılır. <link> tarafından yüklenen içeriğin türünü belirtir, istek eşleştirme, doğru içerik güvenlik politikasının uygulanması ve doğru Kabul et ayarlarının yapılması için gerekli olan istek başlığı. Ayrıca, rel="preload" bunu istek önceliklendirme için bir sinyal olarak kullanır. Aşağıdaki tabloda, bu özellik için geçerli değerler ve bunların uygulandıkları öğeler veya kaynaklar listelenmiştir.
Değeri Şunlara Uygulanır
audio <audio> elementler
document <iframe> ve <frame> elements
embed <embed> elementler
fetch

fetch, XHR

Bu değer, crossorigin niteliğini içermek için <link> değerini de gerektirir.

font CSS @font-face
image <img> ve <picture> srcset veya görüntü kümesi özniteliklerine sahip öğeler, SVG <image> öğelerini, CSS *-image kurallar
object <object> elemanlar
script <script> elemanlar, Çalışan importScripts
style <link rel=stylesheet> elemanlar, CSS @import
track <track> elemanlar
video <video> elemanlar
worker Worker, SharedWorker
crossorigin
Bu numaralandırılmış öznitelik, kaynak alınırken CORS kullanılması gerektiğini gösterir. CORS etkin görüntüler, lekelenmeden <canvas> öğesinde yeniden kullanılabilir. İzin verilen değerler:
anonymous
Çapraz kökenli bir istek (yani, Origin HTTP başlığına sahip) yapılır, ancak hiçbir kimlik bilgisi gönderilmez (yani, çerez, X.509 sertifikası veya HTTP Temel kimlik doğrulaması) gönderilmez. Sunucu kaynak siteye kimlik bilgileri vermezse (Access-Control-Allow-Origin HTTP başlığını ayarlayarak) kaynak etiketlenecek ve kullanımı kısıtlanacaktır.
use-credentials
Gönderilen bir kimlik bilgileriyle birlikte (örneğin, bir çerez, sertifika ve/veya HTTP Temel kimlik doğrulaması gerçekleştirilir) bir çapraz orijinallik isteği (ör. taimted HTTP başlığına sahip) Sunucu kaynak siteye kimlik bilgileri vermezse (Access-Control-Allow-Credentials HTTP başlığı), kaynak etiketlenir ve kullanımı kısıtlanır.
Öznitelik yoksa, kaynak CORS isteği olmadan (yani, Origin HTTP üstbilgisini göndermeden) tatsız kullanımını engeller. Geçersiz ise, numaralandırılmış anonim anahtar kelimesi kullanılmış gibi kullanılır. Ek bilgi için CORS ayarları niteliklerine bakın.
disabled

Yalnızca rel="stylesheet" için disabled Boolean özelliği, açıklanan stil sayfasının belgeye yüklenip yüklenmemesi gerektiğini belirtir. HTML yüklendiğinde disabled belirtilirse, sayfa yüklenirken stil sayfası yüklenmez. Bunun yerine, disabled özelliği false olarak değiştirildiyse veya kaldırılırsa, stil sayfası isteğe bağlı olarak yüklenir.

Ancak, stil sayfası yüklendikten sonra, disabled özelliğinin değerinde yapılan değişikliklerin artık StyleSheet.disabled özelliğinin değeriyle hiçbir ilişkisi yoktur. Bunun yerine bu özelliğin değerini değiştirmek, belgeye uygulanan stil sayfası formunu etkinleştirir ve devre dışı bırakır.

Bu, StyleSheet'in disabled özelliğinden farklıdır; true olarak değiştirmek, stil sayfasını belgenin document.styleSheets listesinden kaldırır ve false konumuna geri döndüğünde stil sayfasını otomatik olarak yeniden yüklemez.

href
Bu özellik, bağlı kaynağın URL belirtir. Bir URL mutlak veya göreceli olabilir.
hreflang
Bu özellik, bağlı kaynağın dilini gösterir. Tamamen tavsiye niteliğindedir. İzin verilen değerler BCP47 tarafından belirlenir. Bu özelliği yalnızca href özelliği varsa kullanın.
importance 
Kaynağın göreceli önemini gösterir. Öncelikli ipuçları, değerler kullanılarak verilir:

auto: Indicates no preference. Tarayıcı, kaynağın önceliğine karar vermek için kendi sezgisel bilgilerini kullanabilir.

high: Tarayıcıya kaynağın yüksek öncelikli olduğunu gösterir.

low: Tarayıcıya, kaynağın düşük öncelikli olduğunu gösterir.

Not: importance özelliği, yalnızca rel="preload" veya <link> öğesi için kullanılabilir rel="prefetch" var.

integrity 
Tarayıcıya getirmesini söylediğiniz kaynağın (dosya) temel 64 kodlu şifreleme karması satır içi meta verilerini içerir. Tarayıcı, alınan kaynağın beklenmedik bir şekilde işleme alınmadığını doğrulamak için bunu kullanabilir. Alt Kaynak Bütünlüğü'ne bakın.
media
Bu özellik, bağlı kaynağın uygulanacağı medyayı belirtir. Değeri bir medya türü medya sorgusu olmalı. Bu özellik temel olarak harici stil sayfalarına bağlanırken kullanışlıdır - kullanıcı aracısının üzerinde çalıştığı cihaz için en iyi uyarlanmış olanı seçmesini sağlar.

Notlar:

  • HTML 4'te bu, yalnızca boşluklarla ayrılmış basit bir medya açıklaması hazır bilgileri listesi olabilir; yani, medya türleri ve grupları, print, screen, aural, braille gibi bu özellik için değer olarak tanımlandığı ve izin verildiği yerlerde. HTML5 bunu, HTML 4'ün izin verilen değerlerinin yerini alan herhangi bir medya sorgusu türüne genişletmiştir.
  • CSS3 Medya Sorguları'nı desteklemeyen tarayıcılar mutlaka yeterli bağlantıyı tanımayacaktır; HTML 4'te tanımlanan kısıtlı ortam sorgusu kümesi olan geri dönüş bağlantılarını ayarlamayı unutmayın.
referrerpolicy 
Kaynağı alırken hangi yönlendiricinin kullanılacağını belirten bir dize:
  • no-referrer Referer başlığının gönderilmeyeceği anlamına gelir.
  • no-referrer-when-downgrade TLS (HTTPS) olmadan bir başlangıç noktasına giderken Referer başlığının gönderilmeyeceği anlamına gelir. Başka türlü bir politika belirtilmemişse, bu bir kullanıcı aracısının varsayılan davranışıdır.
  • origin Yönlendiricinin, kabaca şema, ana bilgisayar ve bağlantı noktası olan sayfanın orijini olacağı anlamına gelir.
  • origin-when-cross-origin diğer kaynaklara navigasyonun şema, ev sahibi ve liman ile sınırlı olacağı, aynı kaynaktaki navigasyonun yönlendirenin yolunu içereceği anlamına gelir.
  • unsafe-url yönlendirenin orijini ve yolu içereceği anlamına gelir (ancak bölüm, parola veya kullanıcı adı değil). Bu durum güvensizdir, çünkü TLS korumalı kaynaklardan güvensiz kökenlere kökeni ve yolu sızdırabilir.
rel
Bu özellik, bağlı belgenin geçerli belgeyle ilişkisini adlandırır. Özelliğin, bağlantı türü değerlerinin boşlukla ayrılmış bir listesi olması gerekir.
sizes
Bu özellik, kaynakta bulunan görsel medya için simgelerin boyutlarını tanımlar. Yalnızca rel bir icon değeri veya Apple'ın apple-touch-icon gibi standart olmayan bir tür içeriyorsa mevcut olmalıdır. Aşağıdaki değerlere sahip olabilir:
  • any, yani, simge, image/svg+xml gibi bir vektör formatında olduğu gibi herhangi bir boyuta ölçeklenebilir.
  • her biri <piksel cinsinden genişlik>x<piksel cinsinden yükseklik> veya <biçiminde bir beyaz boşlukla ayrılmış boyut listesi <piksel cinsinden="" genişlik=""></piksel>X<piksel cinsinden yükseklik>. Bu boyutların her biri kaynakta bulunmalıdır.

Not: Çoğu simge formatı yalnızca bir simge saklayabilir; bu nedenle çoğu zaman sizes özelliği yalnızca bir giriş içerir. MS’in ICO formatı Apple’ın ICNS’sinin yaptığı gibi. ICO daha her yerde bulunur, bu nedenle eğer tarayıcılar arası destek kaygılıysa (özellikle eski IE sürümleri için) bu biçimi kullanmalısınız.

title
title niteliğinin <link> öğesinde özel bir semantiği vardır. Bir <link rel="stylesheet"> üzerinde kullanıldığında, bir tercih edilen veya alternatif bir stil sayfasını tanımlar. Yanlış kullanılması, stil sayfasının yok sayılmasına neden olabilir.
type
Bu özellik, bağlantılı içeriğin türünü tanımlamak için kullanılır. Özelliğin değeri, metin/html, metin/css vb. gibi bir MIME türü olmalıdır. Bu özelliğin yaygın kullanımı, başvurulan stil sayfasının türünü tanımlamaktır (örneğin, metin/css gibi), ancak CSS’nin web’de kullanılan tek stil sayfası dili olduğu göz önüne alındığında, yalnızca type niteliğini atlayın, ancak aslında şu anda pratik önerilir. Tarayıcının yalnızca desteklediği dosya türlerini indirdiğinden emin olmak için rel="preload" bağlantı türlerinde de kullanılır.

Standart olmayan özellikler

methods 
Bu özelliğin değeri, bir nesnede gerçekleştirilebilecek işlevler hakkında bilgi sağlar. Değerler genellikle kullanıldığında HTTP protokolü tarafından verilir, ancak (başlık özniteliği ile benzer nedenlerle) bağlantıya önceden danışma bilgilerini eklemek yararlı olabilir. Örneğin, tarayıcı belirtilen yöntemlerin bir işlevi olarak bir bağlantının farklı bir oluşturulmasını seçebilir; aranabilir bir şey farklı bir simge alabilir veya bir dış link mevcut siteden ayrıldığının bir göstergesi olabilir. Bu özellik iyi tanımlanmamıştır ve tanımlayıcı tarayıcı Internet Explorer 4 tarafından bile desteklenmemektedir.
prefetch  Secure context
Bu özellik, bir sonraki gezinme işleminde gerekli olabilecek bir kaynağı ve kullanıcı aracısının onu alması gerektiğini tanımlar. Bu, ileride kaynak istendiğinde kullanıcı aracısının daha hızlı yanıt vermesini sağlar.
target 
Tanımlanmış bağlantı ilişkisine sahip olan veya herhangi bir bağlantılı kaynağın oluşturulmasını gösterecek olan çerçeve veya pencere adını tanımlar.

Eski özellikler

charset
Bu özellik, bağlı kaynağın karakter kodlamasını tanımlar. Değer, RFC 2045'de tanımlandığı gibi karakter kümelerinin boşluk ve/veya virgülle ayrılmış bir listesidir. Varsayılan değer şudur: iso-8859-1.
Kullanım notu: Bu eski özellik ile aynı efekti üretmek için, bağlı kaynak üzerinde Content-Type HTTP başlığını kullanın.
rev
Bu özelliğin değeri, geçerli belgenin, href özelliği ile tanımlandığı şekilde bağlantılı belgeyle ilişkisini gösterir. Böylece özellik, rel niteliğinin değeriyle karşılaştırıldığında ters ilişkiyi tanımlar. Özniteliğin bağlantı türü değerleri, rel için olası değerlere benzer.

Not: Bu özellik, WHATWG HTML yaşam standardı tarafından (MDN'nin kanonik davrandığı şartnamesi olan) geçersiz. Ancak, W3C şartnamesinde rev'in değil olduğuna dikkat edin. Bununla birlikte, belirsizlik göz önüne alındığında, rev'e güvenmek akıllıca değildir.

Bunun yerine, rel özelliğini, karşıt bağlantı türü değeriyle kullanmalısınız. Örneğin, made için ters bağlantı oluşturmak için author'u belirtin. Ayrıca, bu özellik "revizyon" anlamına gelmez ve birçok site bu şekilde kötüye kullanmasına rağmen, sürüm numarasıyla kullanılmamalıdır.

CSS ile stil oluşturma

<link> elemanın bir web belgesinde görsel bir varlığı yoktur, bu nedenle endişelenilmesi gereken herhangi bir tasarım düşüncesi yoktur.

Örnekler

Stil sayfası dahil etme

Sayfaya stil sayfası eklemek için aşağıdaki söz dizimini kullanın:

<link href="style.css" rel="stylesheet">

Alternatif stil sayfaları sağlama

Ayrıca alternatif stil sayfalarında belirtebilirsiniz.

Kullanıcı, Görünüm ve Sayfa Stili menüsünden seçerek hangi stil sayfasını kullanacağını seçebilir. Bu, kullanıcıların bir sayfanın birden çok sürümünü görmelerine olanak sağlar.

<link href="default.css" rel="stylesheet" title="Varsayılan Stil">
<link href="fancy.css" rel="alternate stylesheet" title="Fantezi">
<link href="basic.css" rel="alternate stylesheet" title="Temel">

Farklı kullanım içerikleri için simgeler sağlama

Aynı sayfada birkaç farklı simgeye bağlantılar ekleyebilirsiniz ve tarayıcı ipucu olarak rel ve sizes değerlerini kullanarak kendi bağlamında hangisinin en iyi sonucu vereceğini seçer.

<!-- yüksek çözünürlüklü Retina ekranlı üçüncü nesil iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png">
<!-- yüksek çözünürlüklü Retina ekranlı iPhone: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png">
<!-- birinci ve ikinci nesil iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png">
<!-- Retina olmayan iPhone, iPod Touch ve Android 2.1+ cihazlar: -->
<link rel="apple-touch-icon-precomposed" href="favicon57.png">
<!-- basic favicon -->
<link rel="icon" href="favicon32.png">

Kaynakları ortam sorgularıyla koşullu olarak yükleme

Bir media niteliği içinde bir ortam türü veya sorgu sağlayabilirsiniz; bu kaynak daha sonra yalnızca ortam koşulu doğru olduğunda yüklenir. Örneğin:

<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="all">
<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)">
<link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)">

Stil sayfası yükleme etkinlikleri

Bir stil sayfasının ne zaman yüklendiğini, üzerine ateşlemek için bir load olayını izleyerek belirleyebilirsiniz; Benzer şekilde, bir stil sayfası işlenirken bir error olayını izleyerek bir hata olup olmadığını tespit edebilirsiniz:

<script>
var myStylesheet = document.querySelector('#my-stylesheet');

myStylesheet.onload = function() {
  // İlginç bir şey yapın; sayfa yüklendi
}

myStylesheet.onerror = function() {
  console.log("Stil sayfası yüklenirken bir hata oluştu!");
}
</script>

<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet">

Not: load olayı, stil sayfası ve içe aktarılan içeriğinin tümü yüklenip ayrıştırıldığında ve stillerin içeriğe uygulanmaya başlamasından hemen önce başlatılır.

Önceden yükleme örnekleri

İçeriği rel="preload" ile önyükleme, bir dizi &ltlink rel="preload"> örneği bulabilirsiniz.

Teknik özet

İçerik kategorileri Meta veri içeriği. itemprop varsa: akış içeriği ve phrasing içeriği.
İzin verilen içerik Yok, bir boş eleman.
Etiket ihmali Boş bir öğe olduğundan, başlangıç etiketi bulunmalı ve bitiş etiketi bulunmamalıdır
İzin verilen ebeveynler Meta veri öğelerini kabul eden herhangi bir öğe. itemprop varsa: içerik ifadesi.
İzin verilen ARIA rolleri Hiçbiri
DOM arayüzü HTMLLinkElement

Şartnames

Şartname Durum Yorum
Preload Candidate Recommendation Defines <link rel="preload">, ve as atıf.
Subresource Integrity
The definition of 'lt;link>' in that specification.
Recommendation integrity atıf eklendi.
HTML Living Standard
The definition of '<link>' in that specification.
Living Standard En son anlık görüntüden değişiklik yok
HTML5
The definition of '<link>' in that specification.
Recommendation crossorigin ve sizes özellikleri eklendi; Herhangi bir medya sorgusuna media genişletilmiş değerleri; rel için birçok yeni değer ekledi.
HTML 4.01 Specification
The definition of '<link>' in that specification.
Recommendation
Resource Hints
The definition of 'prefetch' in that specification.
Working Draft dns-prefetch, preconnect, prefetch ve prerender eklendi.

Tarayıcı uyumluluğu

Ayrıca bakınız