98.css – Windows 98 arayüzünü yeniden oluşturan CSS tasarım sistemi

 (jdan.github.io)
3 puan yazan GN⁺ 2024-11-07 | 1 yorum | WhatsApp'ta paylaş
  • 98.css, yalnızca CSS kullanarak Windows 98 gibi görünen web arayüzleri oluşturmayı sağlayarak eski masaüstü arayüzünü sadık biçimde yeniden üretmeye imkân tanır
  • Erişilebilirlik semantik HTML'e dayanır; buton, etiket ve ikon butonlarında ARIA özelliklerinin doğru kullanılması varsayılır
  • JavaScript içermediği için framework seçiminden bağımsız olarak React, saf JavaScript ve düz HTML projelerine eklenebilir
  • Buton, checkbox, radio button, pencere, treeview, sekme, tableview, progress bar gibi Windows 98 tarzı bileşenler sunar
  • npm, GitHub release'leri ve unpkg üzerinden kullanılabilir; MIT lisansı ile yayımlanır ve hata bildirimleri ile pull request'leri kabul eder

Windows 98 arayüzünü CSS ile yeniden oluşturma yöntemi

  • 98.css, Windows 98 gibi görünen arayüzler oluşturmak için bir CSS kütüphanesidir
  • Proje GitHub üzerinden incelenebilir
  • Erişilebilirlik, ayrı script'lerden çok semantik HTML yapısına dayanır
    • Butonlar için <button> kullanılmalıdır
    • Girdi öğeleri için karşılık gelen bir <label> gerekir
    • İkon butonları, amacı aria-label ile iletir
  • Temel görünüm korunurken öğe stillerinin bir kısmı ezilebilir
    • Buton padding'i artırılabilir veya girdi etiketlerine renk eklenebilir

Kurulum ve framework entegrasyonu

  • 98.css, JavaScript olmadan yalnızca CSS ile HTML öğelerine Windows 98 stili uygular
  • Frontend framework'lerinden bağımsız olarak kullanılabilir
  • Örnek olarak React kullanım örneği ve saf JavaScript kullanım örneği sunulur
  • En hızlı kullanım yolu, stil dosyasını unpkg'den almaktır
<link rel="stylesheet" href="https://unpkg.com/98.css">;

npm install 98.css

Temel form kontrolleri

  • Button

    • Standart buton 75px genişliğinde ve 23px yüksekliğindedir; kabarık dış ve iç kenarlıklara ve varsayılan 12px yatay padding'e sahiptir
    • default sınıfı eklendiğinde, Windows 98'de Enter tuşuyla çalıştırılacak varsayılan eylem görsel olarak aktarılabilir
    • Tıklanmış durumda kabarık kenarlık basılmış bir görünüme dönüşür
    • Devre dışı buton aynı kabarık kenarlığı korur, ancak etiketi soluk görünür
    • Odak, buton içeriğinin 4px içinde yer alan noktalı kenarlıkla gösterilir

  • Checkbox

    • Checkbox, bağımsız veya birbirini dışlamayan seçimleri temsil eder
    • Seçildiğinde çökmüş panel içinde bir onay ikonu gösterilir ve yanında seçeneği belirten etiket yer alır
    • <input type="checkbox"> öğesinden sonra, for özelliği girdinin id değerini işaret eden bir <label> bulunmalıdır
    • checked ve disabled özellikleri kullanılabilir
    • Birden fazla girdiyi gruplayarken, aralıkları hizalamak için her girdi field-row sınıfına sahip bir kapsayıcıyla sarılır

  • Option Button

    • Radio button, sınırlı seçenekler arasından yalnızca birini seçmeyi sağlayan kontroldür
    • <input type="radio"> ile kullanılır; aynı name özelliği verilirse grup hâline gelir
    • Checkbox'ta olduğu gibi, girdi aralıklarını tutarlı tutmak için field-row ile sarılabilir
    • checked ve disabled özelliklerini destekler

  • Group Box

    • Group box, birden çok kontrolü düzenleyen dikdörtgen bir çerçevedir
    • Öğeleri fieldset ile sararak kullanılır; çökmüş dış kenarlık ve kabarık iç kenarlık sağlar
    • Grup etiketi eklemek için legend, fieldset içine yerleştirilebilir

Metin girişi, slider ve dropdown

  • TextBox

    • Text box, kullanıcının metin girdiği veya düzenlediği dikdörtgen bir kontroldür
    • Tek satırlı giriş <input type="text"> olarak render edilir
    • Karşılık gelen <label> ve doğru for özelliği sağlanması, ikisinin de field-row kapsayıcısıyla sarılması önerilir
    • field-row-stacked sınıfı kullanılırsa etiket girdinin yanında değil üstünde konumlandırılabilir
    • Çok satırlı giriş için textarea kullanılır
    • disabled ve value gibi standart HTML özellikleri kullanılabilir

  • Slider

    • Slider, ayar aralığını gösteren bir çubuk ve mevcut değeri gösteren bir göstergeden oluşur
    • <input type="range"> olarak render edilir
    • has-box-indicator sınıfıyla varsayılan gösterge kutu göstergesine dönüştürülebilir
    • is-vertical kullanan bir div ile sarılırsa dikey slider olarak gösterilir
    • Dikey slider uzunluğunu değiştirmek için input öğesinin width değeri ve div öğesinin height değeri ayarlanmalıdır

  • Dropdown

    • Dropdown liste kutusu, listeden yalnızca bir öğe seçilmesini sağlar
    • Kapalı durumda mevcut değeri gösterir; kullanıcı listeyi açarak değeri değiştirir
    • select ve option öğeleriyle render edilir
    • Varsayılan değer ilk option'dır; belirli bir option öğesine selected verilirse varsayılan seçim değiştirilebilir

Windows 98 tarzı pencere yapısı

  • Title Bar

    • Title bar, pencerenin üst kenarının içinde yer alır ve pencerenin içeriğini tanımlar
    • title-bar, title-bar-text, title-bar-controls sınıflarıyla oluşturulur
    • Kapatma butonu, yardımcı teknolojilere amacını iletmek için aria-label="Close" kullanır
    • Minimize, Maximize, Restore, Help gibi aria-label değerleri de kullanılabilir
    • Her aria-label için karşılık gelen bir stil sınıfı vardır; böylece aria-label metni farklı dilde olsa bile render, erişilebilirlik ve yerelleştirme sorunu yaşanmayabilir
    • Maksimize butonu disabled ile devre dışı bırakılabilir
    • inactive sınıfı eklenirse devre dışı title bar gibi görünmesi sağlanabilir

  • Window contents

    • window sınıfı, title bar'ın yer alacağı pencere kapsayıcısını oluşturur; kabarık dış ve iç kenarlık ile padding sağlar
    • Kapsayıcı stilinde width belirtilerek pencere boyutu serbestçe ayarlanabilir
    • Title bar altındaki içerik window-body sınıfıyla çizilebilir

  • Status Bar

    • Status bar genellikle pencerenin alt kısmında yer alır ve mevcut durum ya da bağlam bilgisini gösterir
    • Status bar, status-bar sınıfıyla render edilir
    • Her metin öğesinde status-bar-field sınıfı kullanılır
    • Örnekte Press F1 for help, Slide 1, CPU Usage: 14% gibi status field'ları bulunur

Listeler, sekmeler, tablolar ve progress göstergesi

  • TreeView

    • Treeview, nesne kümesini mantıksal hiyerarşik ilişkilere göre girintili bir ana hat biçiminde gösteren özel bir liste kutusudur
    • ul öğesine tree-view sınıfı eklenerek render edilir
    • Alt li öğelerine istenen içerik konulabilir
    • İç içe ul eklendiğinde noktalı kenarlık ve girintilerle ağaç yapısı gösterilir
    • Açılabilir bölümler, alt liste details öğesi içine konularak oluşturulabilir

  • Tabs

    • Sekme kontrolü, aynı pencere içinde birden fazla mantıksal sayfa veya bilgi bölümü tanımlamak için kullanılır
    • menu öğesine role="tablist", alt li öğelerine ise role="tab" eklenir
    • Sekme yönetimi kullanıcının JavaScript koduyla ele alınmalıdır
    • Aktif sekmeye aria-selected="true" eklemek yeterlidir
    • Çok satırlı sekmeler, menu etiketine multirows sınıfı eklenerek oluşturulabilir

  • TableView

    • Tableview, table öğesiyle render edilir
    • Uygun kenarlık ve overflow kapsayıcısı sağlamak için sunken-panel sınıfına sahip bir div ile sarılır
    • Biraz script eklenirse tableview etkileşimli hâle getirilebilir
    • table öğesine interactive sınıfı verilirse gövde satırlarının hover durumunda pointer imleci gösterilir
    • Satıra highlighted sınıfı verilirse seçilmiş gibi görünür

  • Progress Indicator

    • Progress bar, uzun bir işin tamamlanma oranını göstermek için kullanılır
    • Varsayılan, solid progress bar'dır
    • segmented sınıfı kullanılarak bölümlü progress bar tanımlanabilir
    • İlerleme oranı, progress-indicator-bar öğesinin width stiliyle gösterilir

Alan kenarlıkları ve açık kaynak katılımı

  • Field borders

    • Text box, checkbox, dropdown liste kutusu, spin box ve liste kutusu field border stilini kullanır
    • Pencere içindeki çalışma alanında da aynı stil kullanılabilir
    • Field border, çökmüş dış kenarlık ve çökmüş iç kenarlık kullanır
    • Çoğu kontrolün iç kısmı button highlight rengini kullanır
    • Text box ve combo box gibi metin alanları salt okunur veya devre dışı olduğunda iç kısım button face rengini kullanır
    • Genel kullanım için field-border, field-border-disabled, status-field-border sınıfları sağlanır
    • Bu sınıflar yalnızca kenarlık, arka plan rengi ve minimum padding tanımladığından, genellikle ek padding'i ayrıca belirtmek gerekir

  • Lisans ve katkı

    • 98.css, MIT licensed bir projedir
    • Hata doğrulama ve bildirim için GitHub issues page kullanılır
    • Pull request'ler memnuniyetle karşılanır; özellikle açık kaynağa yeni katılan kişilere code review sunulacağı belirtilir
    • Proje, keyifli bir açık kaynak deneyimi kazanılabilecek bir yer olmayı hedefler

İlgili okumalar

1 yorum

 
GN⁺ 2024-11-07
Hacker News görüşleri

  • 3.11, 95, 2000, XP, CDE, Mac OS 9 ve bunların varsayılan renk paletlerinin hepsini içeren benzer bir şey yapmıştım: https://nielssp.github.io/classic-stylesheets/?theme=win9x&s...
    Odak noktası piksel düzeyinde kusursuz yeniden üretimden çok, yüksek çözünürlüklü monitörler gibi modern ortamlarda da iyi çalışıp güzel görünmesiydi
    Bu yüzden tüm ikonları ve sembolleri SVG olarak yeniden yaptım; XP ve Mac OS 9'u eklediğimde Show HN'e de koydum ama fazla ilgi görmedi

    • Hoşuma gitti ama Windows 2000 temasında başlık yazısı biraz fazla kalın duruyor, bu yüzden azıcık kaymış gibi görünüyor
      Bana göre Windows 2000, UI tasarımının zirvesiydi
    • İnanılmaz havalı; kalite, tema yönetimi ve uygulamanın sadeliği harika
      Ek olarak görmek istediğim şey veri tablosu teması; listeler ve grid'ler gibi çalışan etkileşimli tablolar da olsa güzel olurdu
    • Hotdog stand!
      https://nielssp.github.io/classic-stylesheets/?theme=win3x&s...
    • 98.css, bulabildiğim en özellikli retro CSS kütüphanesi olduğu için bunu basit bir uygulamada kullandım; bu projenin Windows 3.1 renk paletini de denemek istiyorum
    • Proje, UI öğelerini tek tek çok iyi eşleştiriyor; gerçekten güzel ve çok rafine duruyor

  • Bunu yapan kişiyim. Yeniden gündeme gelmesine sevindim
    Bu benim tükenmişlikten toparlanma projemdi ve yakın zamanda bununla ilgili düşüncelerimi yazdım: https://notes.jordanscales.com/98-css-reflections

    • Geçmişte çocukluğumdaki bir şeyi yeniden yaratmaya çalışırken oldukça basit bir web uygulamasında 98.css kullandım ve amacına çok iyi hizmet etti
      [0]: https://www.mathsheets.net/
    • Umarım daha iyi olmuşsundur
      Eski oyunlar ya da işletim sistemleri gibi retro bilişimin teselli edici, hatta iyileştirici olabilmesi ilginç
      Çocukluğumdaki Gameboy ve Nintendo oyunlarını emülatörde oynarken ya da Macintosh System 9 çalıştırırken benzer bir his alıyorum; Pico-8, SerenityOS ve TempleOS da aklıma geliyor
      Ortak nokta, kullanıcının tamamen anlayabildiği ve kontrol edebildiği nostaljik bilişim ortamları olmaları; ayrıca terapi aracı olarak güvenli bir sandbox gibi daha derin psikolojik dinamikler de olabilir
      Günümüz teknolojisi ve toplumunda çok fazla düşmanca dark pattern var; bu yüzden kullanıcının rahatlığı için tasarlanmış fiziksel ve zihinsel alanlar bulmak büyük bir rahatlama sağlıyor
    • Şimdiye kadar gördüğüm en doğru Windows 98 yeniden üretimi
      Windows 2000 ve Windows XP sürümleri de olsa güzel olurdu

  • Derlediklerim:
    The Sims https://thesimscss.inbn.dev/
    Windows 98 https://jdan.github.io/98.css/
    Windows XP https://botoxparty.github.io/XP.css/
    Windows 7 https://khang-nd.github.io/7.css/
    Edward Tufte https://edwardtufte.github.io/tufte-css/

    • Tufte OS'u ilk kez duyuyorum :)

  • 98.css iyi bir nedenle bir HN klasiği haline geldi
    Önceki tartışmalar:
    https://news.ycombinator.com/item?id=33310554 - Ekim 2022, 179 yorum
    https://news.ycombinator.com/item?id=22940564 - Nisan 2020, 211 yorum
    Benzer olarak HyperCard Simulator ve Decker'a da bakılabilir
    https://hn.algolia.com/?q=hypercard

  • 90'ların sonlarında Microsoft'ta, Windows masaüstü temaları ve renkleriyle eşleşen yerleşik CSS renk adları olduğunu hatırlıyorum
    Hâlâ çalışıp çalışmadıklarını bilmiyorum; IDE'de hepsi kırmızı görünüyor, yani çalışmıyor gibiler
    windowtext, appworkspace, menutext, threedlightshadow, threedshadow, threedface gibi değerlerle kullanıcının masaüstü görünümüne uygun web UI'ları yapılabiliyordu
    1998'de tarayıcı tabanlı bir intranet uygulamasında bunu kullanmıştım ve bu sayede biraz daha native görünüyordu

  • Bu stil varsayılan olmayan DPI ile pek iyi anlaşmıyor
    Örneğin monitör ölçeğini %150’ye ayarladığınızda, fiziksel piksellere hizalı görünmesi için tarayıcı konsolunda aşağıdakini çalıştırmayı deneyebilirsiniz:
    with(document.documentElement.style){ transform = \scale(${ 1 / devicePixelRatio })`; transformOrigin = 'top left'; }`
    Ölçeği bir tamsayıyla çarparsanız daha net büyütülmüş bir görünüm elde edebilirsiniz; %100 kusursuz olmasa da amaçlanan render’a çok daha yakın görünüyor

    • with’ü böyle kullanmak hem korkutucu hem de çok taze
      Hoşuma gidiyor ama aynı anda nefret de ediyorum

  • crowdwave’de bundan biraz kullanılmış gibi görünüyor: https://www.crowdwave.com

  • Birlikte bakılabilecekler: https://botoxparty.github.io/XP.css ve https://khang-nd.github.io/7.css

    • Bunlarla gönderilen bağlantının hepsinde modern UI’dan belirgin biçimde farklı olan şey, boşluğun çok daha az olması
      Bugünlerde, radyo düğmesi grubundaki seçeneklerin arası gibi yerlerde nefes alacak alan gerektiği neredeyse bir mantra haline geldi, ama eski UI’ların dar aralıkları daha dürüst, son kullanıcıya daha saygılı ve bilgi yoğunluğu daha yüksek hissettiriyor
      Tüm yenilikleri çöpe atmak istemem ama eski UI’ları sık sık özlüyorum
    • Windows 7 gibi görünen olanı en tamamlanmışı ve ilerleme çubuğu ya da menü gibi diğerlerinde olmayan epey öğe de var
      Windows 7’nin pencere süslemelerini sevmezdim ama geri kalanı bir Electron uygulamasında kullanılsa fena olmaz gibi
    • XP bağlantısını görmek gerçekten sevindirici
      Windows XP UI tüm Windows UI’ları içinde en iyisiydi; şık hissettirecek kadar moderndi ama aynı zamanda kontrastlıydı, bu yüzden görmek, okumak ve anlamak kolaydı
      Windows 7 UI fazla parıltılıydı ve okunabilirlikten çok görselliği öne çıkarıyordu; Windows 98 ise fazla eski ve baştan sona griydi, bu yüzden kontrast eksikliği de vardı
    • Ben de kendiminkinin reklamını yapayım. Yukarıdakiler kadar ayrıştırılmış ya da kapsamlı değil ama temaya oldukça uyuyor:
      https://git.sr.ht/~q3cpma/website/tree/master/item/src/resou...
      https://world-playground-deceit.net/
      Bunlara bakınca sonuna kadar götürmeyi istiyorum
    • Şimdi eksik olan tek şey Windows 3.x sürümü

  • Sadece bakınca bile Windows 95 ve Windows 98’de render edilen MS Sans Serif olmadığı anlaşılıyor

  • Yıllar süren UX/UI “araştırması” ve “iyileştirmeleri”nin ortaya çıkardığından bunun çok daha iyi olduğunu düşünüyorum
    1998’de bir yaşındaydım, yani eski kuşaktan olduğum için de değil
    Sadece buton gibi görünmeyen butonlardan, sekme gibi görünmeyen sekmelerden ve düzenlenebilir olduğunu ancak üstüne tıklayınca anladığınız metin alanlarından nefret ediyorum

    • Ama Windows 95’ten sonra işletim sistemi UI’larına gerçekten bu kadar çok UX/UI araştırması yansıtıldı mı emin değilim
      Apple, MacOSX için bir miktar araştırma yapmış olabilir, ama son 20 yılda özellikle mobilde işlevler keşfedilebilirlik ya da tutarlılık kavramı olmadan rastgele ortaya atılmış gibi hissettirdi
      Hepsinden önemlisi, şirketlerin “tutarlı markalama” ya da “kendine özgü görünüm” istemesi birçok sorunun asıl nedeni gibi görünüyor
    • Yine de koyu gri arka plan üzerindeki siyah metni sevmiyorum
      Ayrıca o web sitesinde normal metin gibi gizlenmiş bir “show code” düğmesi de var