98.css - Windows 98 kullanıcı arayüzünü yeniden oluşturan CSS kütüphanesi

 (jdan.github.io)
1 puan yazan GN⁺ 3 시간 전 | 1 yorum | WhatsApp'ta paylaş
  • 98.css, anlamsal HTML ve erişilebilirlik temelinde Windows 98 gibi görünen web arayüzleri oluşturmaya yarayan bir CSS tasarım sistemidir
  • JavaScript olmadan HTML’ye yalnızca stil uyguladığı için React ve vanilla JavaScript dahil çeşitli frontend ortamlarında kullanılabilir
  • Düğmeler, giriş alanları ve seçim kontrollerinden pencereler, sekmeler, ağaçlar, tablolar ve ilerleme çubuklarına kadar geniş bir Windows 98 UI bileşenleri yelpazesi sunar
  • Etiket bağlantısı, aria-label ve ARIA rollerini destekler; varsayılan görünümü korurken boşluk veya renk gibi stiller de geçersiz kılınabilir
  • unpkg, npm ve GitHub Releases üzerinden kurulabilir; MIT lisansı ile dağıtıldığı için değiştirme ve açık kaynak katkısı mümkündür

Proje yapısı ve kurulum

  • 98.css, Windows 98 arayüzünü sadık biçimde yeniden oluşturan bir CSS kütüphanesidir
  • Anlamsal HTML’yi temel alır; düğmeler için <button>, giriş öğeleri için <label>, ikon düğmeleri için aria-label kullanır
  • Ana hedefleri arasında erişilebilirlik yer alır; klavye ile gezinme ve yardımcı teknolojilerin kullanımı dikkate alınır
  • JavaScript olmadan yalnızca CSS ile HTML’yi biçimlendirdiği için belirli bir frontend framework’üne bağımlı değildir
  • En hızlı kullanım yolu, stil sayfasını unpkg üzerinden yüklemektir
<link rel="stylesheet" href="https://unpkg.com/98.css">;

npm install 98.css
  • Varsayılan görünümü korurken düğme boşlukları veya giriş etiketi rengi gibi tekil stiller serbestçe geçersiz kılınabilir

Temel seçim kontrolleri

  • Düğmeler

    • Standart düğmeler 75×23px boyutundadır; kabartmalı dış ve iç kenarlıklara ve varsayılan 12px yatay boşluğa sahiptir
    • <button>, input[type=submit] ve input[type=reset] desteklenir
    • default sınıfı, etkin pencerede Enter tuşuna basıldığında çalıştırılacak varsayılan eylemi ifade eder
    • Tıklandığında kabartmalı kenarlık içeri basılmış görünüme dönüşür; devre dışı düğmeler kenarlığı korurken etiketi soluklaşır
    • Odak, düğme içeriğinin 4px içinde yer alan noktalı bir kenarlıkla gösterilir

  • Onay kutuları ve radyo düğmeleri

    • Onay kutuları bağımsız veya dışlayıcı olmayan seçimleri ifade eder; seçildiğinde içeri basılmış bir panelin içinde onay ikonu gösterilir
    • Onay kutusunun ardından, girişin id değerini gösteren for özniteliğine sahip bir <label> mutlaka gerekir
    • Bu bağlantı sayesinde yardımcı teknolojiler girişi tanıyabilir
    • Tab tuşuyla gezinmeyi ve etiketin tamamına tıklamayı destekler
    • Standart checked ve disabled öznitelikleriyle seçili ve devre dışı durumları belirlenir
    • Birden çok giriş, tutarlı aralık uygulamak için field-row kapsayıcısıyla sarılır
    • Radyo düğmeleri, sınırlı bir kümeden yalnızca bir seçenek seçmeye yarayan kontrollerdir ve input[type=radio] ile oluşturulur
    • Aynı name özniteliği verilerek birbirini dışlayan bir grup hâline getirilir; onay kutularında olduğu gibi etiket ve field-row kullanılır

  • Grup kutusu

    • fieldset, birden çok kontrolü dikdörtgen bir çerçeve içinde toplar; içeri basılmış dış kenarlık ve kabartmalı iç kenarlıkla oyulmuş kutu benzeri bir görünüm oluşturur
    • İçine legend yerleştirildiğinde grup etiketi gösterilebilir

Metin girişi ve değer seçimi

  • Metin kutusu

    • Tek satırlı giriş input[type=text], çok satırlı giriş ise textarea ile oluşturulur
    • Girişle doğru şekilde ilişkilendirilmiş etiket, field-row ile birlikte sarılarak yatay yerleştirilir
    • field-row-stacked kullanıldığında etiket giriş öğesinin üstüne dikey olarak yerleştirilebilir
    • Standart HTML disabled ve value öznitelikleriyle devre dışı durum ve başlangıç değeri belirlenir

  • Kaydırıcı

    • Kaydırıcı, ayar aralığını ve mevcut değeri ifade eder; input[type=range] olarak render edilir
    • has-box-indicator sınıfı varsayılan göstergeyi kutu biçimli göstergeyle değiştirir
    • Kaydırıcı, is-vertical sınıfı uygulanmış bir div ile sarılırsa dikey yönde gösterilebilir
    • Dikey kaydırıcının uzunluğu, input genişliği ve kapsayıcı div yüksekliğiyle ayarlanır

  • Açılır liste

    • select ve option ile listeden tek bir öğe seçmeye yarayan açılır liste oluşturulur
    • İlk öğe varsayılan olarak seçilir; başka bir option öğesine selected özniteliği verilerek başlangıç seçimi değiştirilebilir

Windows 98 tarzı pencere

  • Başlık çubuğu

    • Başlık çubuğu, pencerenin üst kısmında tam genişlikte yer alır; içeriği tanımlar ve tipik pencere komut düğmelerini içerir
    • title-bar, title-bar-text ve title-bar-controls olmak üzere üç sınıftan oluşur
    • Komut düğmelerinin aria-label değerinde Minimize, Maximize, Restore, Help, Close kullanılabilir
    • aria-label, düğmenin amacını yardımcı teknolojilere aktarırken komuta uygun ikon stilini de uygular
    • Ayrı minimize, maximize, restore, help, close sınıfları da sunulur
    • aria-label metni ile görsel stili ayırarak çok dilli yerelleştirme sürecinde render veya erişilebilirlik sorunları oluşmasını önler
    • Büyütülemeyen pencerelerde Maximize düğmesine disabled verilir
    • title-bar inactive, birden çok pencere arasında etkin olmayan başlık çubuğunu ifade eder

  • Pencere gövdesi ve durum çubuğu

    • window sınıfı kabartmalı dış ve iç kenarlıklar ile boşluk sağlar; kapsayıcı genişliği belirtilerek pencere boyutu değiştirilebilir
    • Başlık çubuğunun altındaki asıl içerik window-body içine yerleştirilir
    • Pencerenin altındaki durum çubuğu, mevcut durum veya klavye durumu gibi bağlamsal bilgileri gösterir
    • Tüm kapsayıcı için status-bar, her metin alanı için status-bar-field kullanılır
    • Durum çubuğu kullanılarak Task Manager, Notepad, File Explorer gibi arayüzler oluşturulabilir

Hiyerarşi, sekme ve tablo arayüzleri

  • Ağaç görünümü

    • ul.tree-view, nesneler arasındaki mantıksal hiyerarşiyi girintili bir liste olarak gösterir
    • Alt ul iç içe yerleştirildiğinde noktalı kenarlık ve girinti uygulanır; içteki li öğelerine istenen içerik konabilir
    • Açılıp kapatılabilen hiyerarşiler, çocuk liste details öğesi içine yerleştirilerek oluşturulur

  • Sekmeler

    • Sekme listesi menu[role=tablist], her sekme li[role=tab] olarak yazılır
    • Etkin sekmeye aria-selected="true" verilir
    • 98.css’te sekme değiştirme mantığı bulunmadığından durum değişimi kullanıcı JavaScript’i ile yönetilmelidir
    • Sekme içeriği role="tabpanel" atanmış pencere alanına yerleştirilir
    • menu öğesine multirows sınıfı eklenirse birden çok satırlı sekmeler oluşturulabilir

  • Tablo görünümü

    • HTML table, uygun kenarlık ve kaydırılabilir alan oluşturmak için div.sunken-panel ile sarılır
    • table.interactive, gövde satırlarının üzerine fareyle gelindiğinde işaretçi imlecini gösterir
    • Seçili satırlara highlighted sınıfı uygulanır; gerçek satır seçme davranışı ayrı bir script ile uygulanır

İlerleme durumu ve genel amaçlı kenarlıklar

  • İlerleme çubuğu

    • Uzun bir işin tamamlanma oranı, progress-indicator içine progress-indicator-bar yerleştirilip genişliği belirlenerek gösterilir
    • Varsayılan biçim tek renkli bir çubuktur; segmented sınıfı eklendiğinde bölümlü ilerleme çubuğuna dönüşür

  • Alan kenarlıkları

    • Metin kutusu, onay kutusu, açılır liste, spin kutusu ve liste kutusu; içeri basılmış dış ve iç kenarlıklı alan stilini kullanır
    • Normal alanlarda içeride düğme vurgu rengi, salt okunur veya devre dışı metin alanlarında düğme yüzeyi rengi kullanılır
    • Durum alanlarında yalnızca içeri basılmış dış kenarlık uygulanır; durum çubuğu veya dinamik olarak değişen salt okunur içerikte kullanılabilir
    • Form dışındaki çalışma alanlarında ve dinamik içerikte de kullanılabilmesi için üç genel amaçlı sınıf sunulur
      • field-border: normal çalışma alanı
      • field-border-disabled: devre dışı çalışma alanı
      • status-field-border: dinamik durum içeriği
    • Bu sınıflar yalnızca kenarlık, arka plan rengi ve minimum boşluğu tanımladığından genellikle ek padding doğrudan belirtilmelidir

Lisans ve katkı

  • 98.css, MIT lisansı ile dağıtılır
  • Hata doğrulama ve bildirme işlemleri GitHub Issues üzerinden yapılabilir
  • Pull request’ler kabul edilir ve kod incelemesi sağlanır; özellikle açık kaynağa ilk kez katkı yapan katılımcılar memnuniyetle karşılanır

İlgili okumalar

1 yorum

 
GN⁺ 3 시간 전
Hacker News yorumları

  • Bu proje tükenmişlikten toparlanma sürecinde yapıldı ve hâlâ benim için çok özel
    https://notes.jordanscales.com/98-css-reflections

    • Çocukken SimGolf ile gerçekten çok fazla zaman geçirdim; yıllarca unutmuştum ama uzun zaman sonra yeniden nostalji hissettim
    • Küçük web sitesi https://www.mathsheets.net/ için mükemmel uydu
      Kullanılabilirlik ile nostalji arasındaki denge çok başarılıydı; başka projelerde de daha fazla kullanmak istedim
    • https://chiptune.app için Winamp teması yaparken başlangıç noktası olarak 98.css'i kullandım; değiştirmesi ve genişletmesi çok kolaydı
    • Son birkaç aydır BeOS'tan ilham alan retro bir CSS kütüphanesi https://beta.mtechnic.me yapıyorum
      Araştırırken 98.css'in yaratıcısının portföyünü de buldum; müzik zevkimiz bile tamamen aynıydı, retro kütüphane yapan herkesin benzer zevklere sahip olup olmadığını merak ettim
    • 98.css'i uzun zamandır doğrudan kendisinin geliştirmeyip, depodaki kaliteli pull request'lere baktıktan sonra yazarın kullanıcı bilgisayarında kripto para madenciliği yapacak biri olmadığını doğrulayıp tam commit yetkisi vermesi harika bir bakım yaklaşımı

  • Flat design komik görünüyor ama birilerine büyük para kazandırdıktan sonra herkes koyun sürüsü gibi peşinden gitti
    Neredeyse 20 yıl geçmesine rağmen hâlâ bundan çıkılamamış olması artık şaşırtıcı değil; eski arayüzlerde çok satırlı sekmelerin doğal biçimde çalışması gerçekten harikaydı

    • Flat ya da yarı flat tasarım, gölge, kontur ve kontrast gibi görsel ayırıcıları yerinde kullanınca gayet iyi oluyor
      Sorun, az olanın daha iyi olduğu fikrinin Apple, Google ve onların taklitçilerinin aşırı doygun, oyuncak hamuru gibi arayüzleriyle çatışması
    • Sayfada bir şeyi bulmak daha uzun sürerse şirketlerin önemsediği sayfada kalma süresi artıyor; bugünkü sonucun çıkması da bundan
    • Win9x ve 3.x'te düğme kenarları, pencere çerçeveleri, sekmeler ve metin kutularında ince üç boyutlu ipuçları ve gradyanlar vardı; ama zamanla gittikçe düzleşti ve artık kaybolmuş bir teknik gibi görünüyor
    • Eski arayüzlerde en sevmediğim şey çok satırlı sekmelerdi
      Değerli dikey alanı kaplıyorlardı ve her tıklamada satırların konumu değiştiği için kafa karıştırıcıydılar; bir düğme durumu gösteriyorsa tıklandıktan sonra yer değiştirmemeli
    • Sadece flat design değil, renk kullanımı da azaldı
      Milyonlarca renk gösterebilen monitörler ve ekran kartlarımız var ama kullanmıyoruz; her şeyi boyama kitabına çevirmek gerekmiyor ama Windows 10 ve 11 kasvetli hissettiriyor

  • 98.css tarzı işlerde beni hep rahatsız eden şey MS Sans Serif'in hafifçe hatalı olmasıydı; sonunda kendim düzeltmeye karar verdim
    https://github.com/jdan/98.css/pull/230

  • Bu proje daha önce de birkaç kez popüler olmuştu: 2024'te 471 puan ve 93 yorum https://news.ycombinator.com/item?id=42056918, 2022'de 606 puan ve 182 yorum https://news.ycombinator.com/item?id=33310554, 2020'de 838 puan ve 211 yorum https://news.ycombinator.com/item?id=22940564

  • Bu stili uygulayacak bir web sitesi yapmak istiyorum ama nereye yakışacağını aklıma getiremiyorum.
    Linux’u Windows XP gibi gösteren XFCE-winxp-tc de harika. Chicago95 çok biliniyor ama 2004 havası istiyorsanız https://github.com/rozniak/xfce-winxp-tc buna daha uygun.

    • İnternette yakışması için bir sebep gerekmez; sadece yapmak istemeniz yeterlidir.
    • XFCE·GTK temalarının piksel düzeyinde doğru olduğunu iddia etse de gerçekte öyle olmaması hep canımı sıkıyordu.
      Bunun yasal kaygılardan kaynaklanıp kaynaklanmadığını bilmiyorum.

  • Devre dışı bırakılmış düğmeleri kaldırıp hiç göstermemek, günümüzün en kafa karıştırıcı UI eğilimlerinden biri ve gri düğmeleri görmek beni aksine rahatlatıyor.

    • Microsoft’un eski yönergeleri devre dışı bırakılmış denetimleri ayrıntılı biçimde ele alıyordu.
      Yalnızca kullanıcının onun uygulanabilir olmasını bekleyebileceği ve neden devre dışı olduğunu kolayca çıkarabileceği durumlarda devre dışı bırakılmalı; etkinleştirmenin bir yolu yoksa ya da uygulanması beklenmiyorsa kaldırılmalıdır. Nedenini anlamak kolay değilse etkin bırakıp yanlış kullanıldığında faydalı bir hata mesajı göstermek daha iyidir.
      https://learn.microsoft.com/en-us/windows/win32/uxguide/top-...
      Ama modern yönergeler https://learn.microsoft.com/en-us/windows/apps/develop/ui/co... bu tür ince ayrımları, hatta devre dışı düğmelerin kendisini bile ele almıyor.
    • Kullanıcının baştan yapamayacağı işlevlerde, örneğin yönetici yetkisi yoksa ya da yalnızca görüntüleme izni varsa, düğmeyi gizlemek doğrudur.
      Buna karşılık çalıştırma izni varsa ama mevcut mod ya da durum yüzünden yapılamıyorsa gri düğme gösterilmelidir. Formlarda gri düğmeler de tıklanabilir olmalı ve neyin yanlış olduğunu anlatmalıdır. Büyük bir havayolunda bu yönlendirme olmadığı için check-in işlemini tamamlayamamıştım.
      Üzerine gelince çıkan yardım ipuçları ve küçük ? işaretleri ortadan kayboldu; sanki tüm yazılımlar daha ilk günden nasıl kullanılacağını bildiğinizi varsayıyor.

  • https://ka.ge, 98.css ile yapılmış kişisel bir site; 1MB’tan küçük boyutuyla Windows 98 masaüstü ortamını piksel düzeyinde doğru ve gerçekten çalışır şekilde yeniden üretmiş.

  • Çok satırlı sekme örneğindeki sekmelerin, tıklanınca orijinal Windows’taki gibi rastgele yer değiştirmemesi biraz üzücü.

  • İşletim sisteminin her yeni sürümünde UI tasarımcılarının, işlevsel olarak gereksiz, daha çok kaynak tüketen, daha yavaş ve daha kararsız değişiklikleri bile iyileştirme diye pazarlaması gerekti.

    • less faster ifadesini görünce o UI tasarımcıları bu yoruma da el atmış gibi geldi.

  • Windows 98 UI kullanıcı deneyiminin zirvesi bile değilken, bu tür yeniden üretim çalışmalarına neden odaklanıldığını anlamak zor.
    Bugünkü şişkinlik, teknoloji ve soyutlama katmanlarının üst üste birikmesinin sonucu; dolayısıyla asıl önemli olan iyi bir kullanıcı deneyimi için gereken unsurları anlayıp en az teknik bileşeni bulmaktır.

    • Daha doğrusu Windows 2000, UI tasarımının zirvesiydi ve sonrasında sürekli kötüleşti.
      Yuvarlatılmış köşeler ve havada duran boşluklar bunun başlıca örnekleri; macOS ve web tasarımcılarının etkisi kullanılabilirliğe zarar verdi.