Makaleler

HTML, CSS, JavaScript Web Teknolojileri

Web teknolojileri, internetin doğuşundan bu yana hızla gelişmiş ve modern dünyanın temel taşlarından biri haline gelmiştir. HTML (HyperText Markup Language), CSS (Cascading Style Sheets) ve JavaScript, web sayfalarının yapı taşlarını oluşturan üç temel teknolojidir. Bu diller, 1990'lı yıllarda internetin yaygınlaşmasıyla birlikte kullanılmaya başlasa da, özellikle HTML ve CSS'in gelişim süreçleri, bazı dönemlerde duraklama yaşamıştır. JavaScript ise zamanla sadece tarayıcı içi bir betik dili olmaktan çıkıp geniş bir ekosistemin belkemiği haline gelmiştir. Bu makalede, HTML, CSS ve JavaScript'in tarihsel gelişimi incelenecek, bu teknolojilerin nasıl evrildiği ve gelecekteki olası değişim senaryoları tartışılacaktır.

---

HTML, CSS ve JavaScript'in Tarihsel Gelişimi

HTML'nin Tarihsel Gelişimi

HTML, 1989 yılında Tim Berners-Lee tarafından web sayfalarının yapısını tanımlamak amacıyla geliştirilmiştir. İlk resmi sürüm olan HTML 1.0, 1991 yılında piyasaya sürülmüş ve oldukça basit bir yapı sunmuştur. 1995 yılında HTML 2.0, daha fazla etkileşimli içerik desteği ile kullanıma sunulmuştur. HTML 3.2 (1997) ve HTML 4.01 (1999) ile tablolar, stiller ve formlar gibi önemli özellikler eklenmiştir.

Ancak bu dönemlerden sonra, HTML'nin gelişimi duraklama sürecine girmiştir. Bunun en büyük nedeni, tarayıcılar arasındaki uyumsuzluklar ve farklı tarayıcıların farklı özellikler sunmasıdır. Ayrıca, o dönemde dinamik ve medya açısından zengin içerikler oluşturmak için Flash gibi üçüncü taraf eklentiler yaygın olarak kullanılıyordu. HTML, bu taleplere tam olarak cevap veremediği için geniş çaplı bir gelişim gösteremedi.

2000'li yılların başlarında XHTML standardı ortaya atıldı ve HTML'nin daha katı kurallarla çalışması amaçlandı. Ancak bu katı yapı, geliştiriciler tarafından benimsenmedi ve XHTML, yaygın bir şekilde kullanılmadı.

HTML'nin bu durgunluk dönemi, HTML5 ile sona erdi. HTML5, 2014 yılında resmi olarak tanıtıldı ve çok önemli yenilikler getirdi. HTML5, video, ses, grafikler ve daha zengin medya desteği sunarak interneti daha dinamik ve interaktif hale getirdi. HTML5 ayrıca JavaScript ile daha uyumlu çalışarak modern web uygulamalarının temellerini attı. Yeni semantik elementler (article, section, nav, vb.) ve API'lar (Canvas, Web Workers, Local Storage, vb.) HTML5 ile standart hale getirildi.

CSS'nin Tarihsel Gelişimi

CSS (Cascading Style Sheets), web sayfalarının görünümünü ve stilini tanımlamak için kullanılan bir dil olarak 1996 yılında W3C (World Wide Web Consortium) tarafından geliştirildi. CSS1, web sayfalarının metin rengi, yazı tipi ve basit düzen gibi görsel özelliklerini tanımlamaya olanak sağlıyordu.

CSS2 (1998) ile daha karmaşık düzen yapıları, baskı stilleri ve medya sorguları gibi önemli özellikler eklendi. Ancak, bu dönemde CSS'in gelişimi yavaşladı. Bunun temel nedeni, tarayıcıların CSS standartlarını tam olarak desteklememesi ve uyumsuzluk sorunlarıydı. Geliştiriciler bu dönemde daha çok tablo tabanlı sayfa düzenlemeleri yaparak CSS'in yerine geçici çözümler arıyordu.

CSS3 ile birlikte CSS, modüler bir yapıya kavuştu. CSS3, animasyonlar, geçişler, yuvarlatılmış köşeler ve gölgeler gibi görsel açıdan zengin özelliklerle modern web sayfalarının estetik açıdan daha etkileyici hale gelmesini sağladı. Ayrıca flexbox ve grid gibi güçlü düzenleme araçları, CSS3 ile tanıtıldı ve bu sayede karmaşık sayfa düzenlerini oluşturmak daha kolay hale geldi. CSS'in bu evrimi, web tasarımının daha profesyonel ve kullanıcı dostu hale gelmesine katkıda bulundu.

CSS (Cascading Style Sheets)'in Sürüm Geçmişi

CSS 1 (1996)

CSS'in ilk sürümü CSS1, W3C (World Wide Web Consortium) tarafından 1996 yılında piyasaya sürüldü. Bu sürüm, temel stil özelliklerini tanımlamak için kullanıldı ve web sayfalarının tasarımında ilk adımı attı.

• Özellikler:
  • Metin ve Yazı Tipi Stilleri: Yazı tipi ailesi, boyutu, rengi gibi temel metin özelliklerinin stilini kontrol edebilme.
  • Renkler ve Arkaplan: Arka plan rengi ve yazı rengi gibi özellikler.
  • Kenarlıklar ve Marjinler: Elemanların kenarlıkları, boşluklar (margin ve padding) gibi özelliklerin kontrolü.
  • Link Stilleri: Bağlantıların rengini ve stilini değiştirebilme.

CSS1'in getirdiği bu basit özellikler, web tasarımında önemli bir yenilik oldu. Web sayfalarının daha estetik görünmesini sağladı, ancak daha karmaşık düzenler için yeterli değildi.

---

CSS 2 (1998)

CSS'in ikinci büyük sürümü CSS2, 1998 yılında yayınlandı ve CSS'in özelliklerini büyük ölçüde genişletti. Bu sürüm, modern web tasarımının temel taşlarını oluşturdu ve daha gelişmiş stillendirme ve düzen seçenekleri sundu.

• Özellikler:
  • Sayfa Düzeni (Positioning): Elemanların sayfa üzerinde mutlak (absolute), göreceli (relative), sabit (fixed) ve statik (static) olarak konumlandırılması.
  • Medya Türleri: Farklı cihazlar (ekran, yazıcı vb.) için farklı stiller tanımlama yeteneği. Örneğin, @media sorguları ile farklı ekran genişliklerine göre stiller tanımlanabilir.
  • Z-index: Katmanlama (z-index) özelliği ile elemanların birbirlerinin üstüne yerleştirilmesi sağlandı.
  • Tablolar: CSS2 ile tabloların stillendirilmesi daha esnek hale getirildi.
  • Baskı Stilleri: Baskı için özel stil seçenekleri (örneğin, yazdırma sırasında sayfada görünmeyen elementleri gizleyebilme).

CSS2, özellikle layout (düzen) ve elemanların konumlandırılması açısından büyük yenilikler getirdi. Ancak tarayıcıların bu standardı tam olarak desteklememesi, geliştiricilerin karşılaştığı en büyük sorunlardan biriydi.

---

CSS 2.1 (2011)

CSS2'nin güncellenmiş sürümü olan CSS 2.1, 2011 yılında standartlaştırıldı. CSS2.1, CSS2'de bulunan bazı hataları düzeltti ve çeşitli küçük iyileştirmeler sundu.

• Özellikler:
  • CSS2'de yer alan özelliklerin birçoğunu korudu, ancak bazı karmaşık ve nadir kullanılan özellikler CSS2.1'de çıkartıldı.
  • Tarayıcı uyumluluğu artırıldı ve bazı hatalar giderildi.

Bu sürümle birlikte CSS, daha stabil ve geniş çapta tarayıcılar tarafından desteklenen bir standart haline geldi.

---

CSS 3 (2011)

CSS'in en büyük sıçramalarından biri CSS3 ile gerçekleşti. CSS3, 2011 yılında resmi olarak tanıtıldı, ancak modüler bir yapıya sahip olduğu için farklı özellikleri farklı zamanlarda standartlaştırıldı. CSS3'ün getirdiği en büyük yenilik, dilin modüler hale getirilmesiydi. Bu, CSS'in daha hızlı ve esnek bir şekilde gelişmesini sağladı.

• Özellikler:
  • Modüler Yapı: CSS3, farklı modüller halinde geliştirildi. Her modül (örneğin, CSS Animations, CSS Transitions, CSS Flexbox, CSS Grid), ayrı ayrı güncellenebilir hale geldi.
  • Animasyonlar ve Geçişler: CSS ile animasyonlar yapabilme özelliği geldi. @keyframes ile animasyonlar tanımlanabilirken, transition ile elemanlar arasında geçiş efektleri eklendi.
  • Yuvarlatılmış Köşeler: border-radius özelliği ile elemanların köşeleri yuvarlatılabilir hale geldi.
  • Gölgelendirme: box-shadow ve text-shadow gibi özelliklerle kutulara ve metinlere gölgeler eklenebildi.
  • Renk Opaklığı: rgba() ve hsla() ile renklerin saydamlık (opacity) derecesi ayarlanabildi.
  • Flexbox ve Grid Düzeni: CSS3 ile daha esnek ve gelişmiş düzen seçenekleri geldi. Flexbox, kutu modeline esneklik kazandırırken, Grid düzeni sayfada daha karmaşık ve düzenli layoutlar oluşturmaya olanak sağladı.
  • Medya Sorguları: @media ile farklı cihaz boyutlarına göre tasarım yapmayı sağlayan medya sorguları daha da geliştirildi ve mobil tasarımlar için önemli hale geldi.

CSS3'ün getirdiği modüler yapı, CSS'in gelişimini hızlandırdı. CSS3 sayesinde web tasarımı daha interaktif, esnek ve kullanıcı dostu hale geldi.

---

CSS 4 (Gelişim Süreci)

CSS4 resmi olarak tamamen yayınlanmış bir standart değildir. Aslında, CSS4 terimi, CSS modüllerinin sürekli olarak gelişen sürümleri için genel bir etiket olarak kullanılmaktadır. CSS3 ile başlayan modüler yapı, CSS'in gelecekte de modüller halinde gelişeceğini gösteriyor. Bu modüller, CSS'in çeşitli bölümlerinde yapılacak iyileştirmeleri içerebilir.

CSS4'ün bazı kilit modülleri şu şekildedir:

• Selectors Level 4: Daha karmaşık seçimleri mümkün kılan yeni seçici özellikleri. Örneğin, :is() ve :where() gibi seçiciler daha gelişmiş stil kurallarını tanımlamaya olanak tanır.
• CSS Variables: CSS'de tekrarlanan değerleri -- ile tanımlanarak kullanılmasını sağlayan değişkenler (custom properties).
• Subgrid: CSS Grid düzenine bir alt grid tanımlama özelliği eklendi.

CSS4, büyük bir sürüm numarası yerine modüler olarak geliştirilmeye devam edilen bir yapı olarak karşımıza çıkıyor. Bu nedenle, CSS'in geleceği her modülün kendi içinde bağımsız olarak geliştirileceği bir yapı etrafında şekillenecek.

JavaScript'in Tarihsel Gelişimi

JavaScript, 1995 yılında Brendan Eich tarafından 10 gün gibi kısa bir sürede geliştirilen bir betik dili olarak ortaya çıktı. Başlangıçta Mocha ve ardından LiveScript adlarıyla anılan bu dil, sonrasında Java dilinin popülaritesinden faydalanmak amacıyla "JavaScript" olarak yeniden adlandırıldı. JavaScript, Netscape Navigator tarayıcısında çalışmaya başladı ve kısa sürede dinamik, etkileşimli web sayfalarının geliştirilmesinde kilit bir rol oynadı.

1997 yılında JavaScript, ECMA International tarafından standartlaştırıldı ve ECMAScript adını aldı. İlk sürüm olan ECMAScript 1 (ES1), JavaScript'in temel yapısını oluşturdu. Ardından gelen ECMAScript 3 (1999), JavaScript'in genişletilmesine yönelik büyük adımlar attı. Düzenli ifadeler (regular expressions), try/catch yapısı ve switch-case kontrol yapıları gibi önemli yenilikler JavaScript'e eklendi. Ancak JavaScript'in en büyük sıçraması ECMAScript 5 (2009) ve ECMAScript 6 (ES6) (2015) ile geldi.

ES6, JavaScript'e let ve const ile daha güçlü değişken tanımlama, class ile nesne yönelimli programlama desteği, arrow functions ve modules gibi büyük yenilikler getirdi. JavaScript, bu tarihten itibaren daha modern, modüler ve ölçeklenebilir hale geldi. Daha sonra gelen ECMAScript 7 ve sonrasındaki sürümler, dili daha da güçlü kılan çeşitli özellikler ve optimizasyonlar sundu.

JavaScript'in Sürüm Geçmişi

1996: JavaScript 1.0 & 1.1

• JavaScript, Netscape Navigator 2.0'da JavaScript 1.0 olarak piyasaya sürüldü.
• JavaScript 1.1, Netscape Navigator 3.0'da tanıtıldı ve temel manipülasyon ve etkileşim işlemleri için kullanılan bir dil haline geldi.

1997: ECMAScript 1 (ES1)

• JavaScript, Netscape ve diğer tarayıcılar arasında standart hale getirilmesi amacıyla ECMAScript adı altında bir standarda dönüştürüldü.
• ECMAScript 1 (ES1), 1997'de yayınlandı ve JavaScript'in ilk resmi sürümü oldu.

1998: ECMAScript 2 (ES2)

• ECMAScript 2, 1998 yılında küçük güncellemelerle yayınlandı. Büyük değişiklikler sunmadı; esas amacı ECMAScript'i ISO/IEC standardına uydurmaktı.

1999: ECMAScript 3 (ES3)

• ECMAScript 3 (ES3), 1999'da yayınlandı ve JavaScript için önemli yenilikler getirdi:
• Düzenli ifadeler (Regular Expressions): Metin işlemleri için güçlü bir araç eklendi.
• Try/Catch: Hata yönetimi için bir yapı tanıtıldı.
• Do-While Döngüsü: Döngü yapıları genişletildi.
• Switch-Cases: Koşullu ifadeler için switch yapısı eklendi.
• Daha gelişmiş string ve array manipülasyonu: Daha güçlü metin ve dizi işlemleri sağlandı.

2009: ECMAScript 5 (ES5)

• ECMAScript 5 (ES5), 2009 yılında JavaScript'in en yaygın kullanılan sürümlerinden biri olarak tanıtıldı.
• Strict Mode: Kodun daha katı kurallara göre çalışmasını sağlayan bir mod tanıtıldı.
• Array Methods: forEach(), map(), filter(), reduce() gibi array metodları eklenerek dizi işlemleri kolaylaştırıldı.
• JSON: JavaScript'e JSON desteği doğal olarak eklendi.
• Object Methods: Object.create(), Object.defineProperty() gibi metodlar tanıtıldı.

2015: ECMAScript 6 (ES6) / ECMAScript 2015

• ECMAScript 6 (ES6), 2015'te yayınlandı ve JavaScript'te büyük bir devrim yarattı. Modern JavaScript'in temelleri bu sürümde atıldı.
• let ve const: Yeni değişken tanımlama yapısı getirildi.
• Arrow Functions: Daha kısa ve anlaşılır fonksiyon tanımlamaları sunuldu.
• Classes (Sınıflar): JavaScript'e nesne yönelimli programlama (OOP) özellikleri eklendi.
• Modules: Modüler yapı tanıtıldı, import ve export ile modüller kullanılabilir hale geldi.
• Promises: Asenkron işlemler için Promises yapısı tanıtıldı.
• Default Parameters: Fonksiyonlara varsayılan parametreler eklendi.
• Spread Operator: Array ve objeleri genişletmek ve kopyalamak için kullanıldı.

2016: ECMAScript 7 (ES7)

• ES7 (2016), büyük yenilikler getirmedi ancak bazı kullanışlı özellikler sundu:
• Exponentiation Operator: Üs alma operatörü (**) tanıtıldı.
• Array.prototype.includes(): Dizide bir elemanın var olup olmadığını kontrol eden metod eklendi.

2017: ECMAScript 8 (ES8)

• ECMAScript 8 (ES8), 2017'de JavaScript'e daha fazla işlevsellik ekledi:
• Async/Await: Asenkron işlemleri daha okunabilir hale getiren bir yapı tanıtıldı.
• Object.entries() ve Object.values(): Objelerden değer almak için yeni metodlar eklendi.

2018: ECMAScript 9 (ES9)

• 2018 yılında yayınlanan ES9, JavaScript'e birkaç ekleme ve düzeltme getirdi:
• Rest/Spread Properties: Obje spread operatörü genişletildi.
• Promise.prototype.finally(): Promise zincirinde bir işlem tamamlandığında çalışacak metod eklendi.

2019: ECMAScript 10 (ES10)

• ES10 (2019), JavaScript'e bazı küçük ama kullanışlı yenilikler getirdi:
• Array.prototype.flat() ve flatMap(): Dizileri düzleştirmek için yeni metodlar tanıtıldı.
• Object.fromEntries(): Anahtar-değer çiftlerinden obje oluşturma.
• String.trimStart() ve trimEnd(): String başındaki ve sonundaki boşlukları silen metodlar.

2020: ECMAScript 11 (ES11)

• ES11 (2020), modern JavaScript'in işlevselliğini artıran bazı yenilikler sundu:
• Nullish Coalescing Operator (`??`): undefined veya null olan değerler için varsayılan bir değer döndürmek üzere kullanıldı.
• Optional Chaining (`?.`): Objelerdeki alt özelliklere güvenli bir şekilde erişim sağlayan yapı tanıtıldı.

2021: ECMAScript 12 (ES12)

• ES12 (2021), hata yönetimi ve daha zengin sayısal işlemlerle ilgili küçük güncellemeler getirdi.

JavaScript'in Günümüzdeki Önemi ve Geleceği

Neden Tarayıcılar JavaScript'e "Mahkum"?

JavaScript, 1990'lı yıllardan bu yana web tarayıcıları için vazgeçilmez bir bileşen haline gelmiştir. Bunun birkaç ana nedeni bulunmaktadır:

Dinamik ve Etkileşimli İçerik Üretimi: JavaScript, kullanıcı etkileşimlerine anında cevap verme yeteneği ile web sayfalarının statik yapısını dinamik hale getirir. Kullanıcılar butonlara tıkladığında, formları doldurduğunda veya sayfada gezinirken anında geri bildirim alır.

Geniş Kapsamlı Tarayıcı Desteği: JavaScript, tüm büyük web tarayıcılarında (Chrome, Firefox, Edge, Safari, vb.) yerleşik olarak desteklenir. JavaScript, tarayıcıların temel işlevselliklerinin ayrılmaz bir parçası haline gelmiştir ve bu nedenle yeni bir betik dilinin JavaScript'in yerini alması zordur.

Tekrarlanabilir Web Uygulama Standartları: JavaScript, web uygulamalarının arka planda çalışmasını ve kullanıcı arayüzüyle etkileşime geçmesini sağlayan AJAX ve DOM (Document Object Model) gibi standartların bir parçasıdır. Tarayıcıların web standartlarını sıkı bir şekilde takip etmesi, JavaScript'in web uygulamalarının temel yapı taşı olmasını sağlar.

Node.js ve Sunucu Taraflı Kullanım: 2009'da geliştirilen Node.js ile JavaScript, sadece tarayıcıda değil, sunucu tarafında da çalışmaya başladı. Bu, JavaScript'in web geliştirme ekosistemindeki etkisini daha da genişletti. Hem istemci hem de sunucu tarafında aynı dili kullanabilmek, geliştiriciler için büyük bir avantaj sağladı.

Yeni Bir Tarayıcı Mümkün mü?

Teorik olarak, yeni bir web tarayıcısı geliştirmek ve mevcut tarayıcılara alternatif bir betik dili sunmak mümkün olabilir. Ancak pratikte bu oldukça zorlayıcı olacaktır. Bunun nedenleri şunlardır:

• Kapsamlı JavaScript Ekosistemi: JavaScript, tarayıcıların ve web standartlarının uzun süredir yerleşik bir parçasıdır. Bugün milyonlarca web sayfası, uygulama ve araç JavaScript'e dayanmaktadır. Yeni bir tarayıcı ve betik dili geliştirmek, bu devasa ekosistemi yeniden inşa etmek anlamına gelir.

• Geliştirici Altyapısı: Geliştiriciler, JavaScript'e dayalı çok sayıda kütüphane, framework (React, Angular, Vue.js vb.) ve araç setine sahiptir. Yeni bir betik dili, bu araçların tekrar yazılmasını veya uyumlu hale getirilmesini gerektirir.

• Uyumluluk Sorunları: JavaScript ile uyumsuz bir tarayıcı geliştirmek, kullanıcıların internette gezinti deneyimini olumsuz yönde etkileyebilir. Mevcut web siteleri ve uygulamalar bu tarayıcıda düzgün çalışmayacaktır.

Dolayısıyla, yeni bir tarayıcı veya betik dili geliştirmek mümkün olsa da, bunun yaygın şekilde benimsenmesi ve uygulanması çok zor olacaktır.

JavaScript Vazgeçilebilir mi?

JavaScript'in mevcut web teknolojileri ekosistemindeki konumu göz önüne alındığında, kısa vadede JavaScript'ten vazgeçilmesi olası görünmemektedir. JavaScript'in yerini tamamen alacak bir alternatif dil henüz geliştirilmemiştir. Bununla birlikte, WebAssembly gibi teknolojiler JavaScript'e alternatif olarak öne çıkmaya başlamıştır. Ancak bu teknolojiler bile JavaScript'in tamamen yerini almaktan ziyade onu desteklemek ve tamamlamak amacıyla kullanılmaktadır.

Farklı Bir Tarayıcı ve Mimari Mümkün mü?

Günümüz web tarayıcıları, HTML, CSS ve JavaScript'e dayanır ve bu üçlü kombinasyon yıllardır web teknolojilerinin bel kemiğini oluşturmuştur. Ancak teorik olarak, tamamen farklı bir tarayıcı ve mimari geliştirmek mümkündür.

WebAssembly (Wasm) gibi teknolojiler, JavaScript'in performans sınırlamalarını aşmak için kullanılmaktadır. WebAssembly, web uygulamalarının daha düşük seviyeli, daha hızlı bir şekilde çalışmasına olanak tanıyan bir dildir ve JavaScript ile birlikte çalışabilir. Ancak, WebAssembly bile JavaScript'in tamamen yerini almak yerine, onu tamamlayan bir teknoloji olarak tasarlanmıştır.

Farklı bir mimari düşünülse bile, yeni bir tarayıcının mevcut web standartlarıyla uyumlu olması gerekir. Mevcut milyarlarca web sayfasının yeniden yazılması veya dönüştürülmesi neredeyse imkansızdır. Bu nedenle, web tarayıcılarının kısa vadede HTML, CSS ve JavaScript'ten vazgeçmesi beklenmemektedir.

Netice

HTML, CSS ve JavaScript, modern web teknolojilerinin yapı taşlarıdır ve her biri zaman içinde büyük değişimler yaşamıştır. Tarayıcıların JavaScript'e "mahkum" olmasının ardında, yıllardır süregelen geniş çaplı destek, ekosistem ve kullanıcı deneyimi yatmaktadır. JavaScript'in yerini alabilecek alternatifler üzerinde çalışmalar yapılsa da, kısa vadede JavaScript'ten vazgeçilmesi olası değildir. Bu nedenle, web teknolojilerinin geleceği, JavaScript, HTML5 ve CSS3 gibi dillerin gelişmeye devam ettiği bir ekosistemde şekillenecektir.