Jump to content

Blogs

Fundamentals

CSS'te Scrollbar

1. Scrollbar Anatomisi ve Tarayıcı Davranışı a) Scrollbar Bileşenleri ┌─────────────────────────┐ │ ▲ (up button) │ ← Scrollbar button ├─────────────────────────┤ │ │ ← Track (kanal) │ ████ │ ← Thumb (kaydırıcı) │ │ │ │ ├─────────────────────────┤ │ ▼ (down button) │ └─────────────────────────┘ Bileşenler: Track (Kanal): Scrollbar'ın arka plan alanı Thumb (Kay
Typography

CSS'te Metin Okunabilirliği (Text Readability)

Metin okunabilirliği, kullanıcıların metni ne kadar kolay okuyabildiği ve anladığıyla ilgilidir. Bu, tipografi, spacing, kontrast ve layout kararlarının birleşimidir. 1. Temel Okunabilirlik Faktörleri a) Satır Uzunluğu (Line Length / Measure) Optimal: 45-75 karakter (İngilizce için), 50-80 karakter (Türkçe için) /* Kötü - çok geniş satırlar */ .article { max-width: 100%; /* 120+ karakter - gözler satır sonunu bulamaz */ } /* İyi - optimal satır uzunluğu */ .article { max
Units

CSS'de lh Birimi

lh birimi, CSS'de line-height (satır yüksekliği) değerine göre hesaplanan görece yeni bir uzunluk birimidir. Bir elementin hesaplanmış satır yüksekliğini temsil eder. Temel Tanım 1lh, elementin kendi line-height değerine eşittir. Örneğin: .element { font-size: 16px; line-height: 1.5; /* 24px */ margin-bottom: 1lh; /* 24px olur */ } Nasıl Çalışır? lh birimi, kullanıldığı elementin hesaplanmış line-height değerini referans alır: .card { font-size: 18px; line-heigh
Doğuhan ELMA

Doğuhan ELMA in Units

0
Properties

CSS line-height Özelliği

CSS'teki line-height (satır yüksekliği) özelliğinin değeri, modern web tasarımında metin okunabilirliğini ve dikey ritmi sağlamak için kritik öneme sahiptir. CSS'in en kritik tipografi özelliklerinden biridir. Duyarlı (responsive) tasarımlarda okunabilirliği artırmak temel hedeftir. line-height temel olarak, bir metin satırının yukarısındaki ve aşağısındaki görünmez boşluğu (leading) belirler. Bu boşluk, satırın kendisinin yüksekliğini oluşturur ve metin boyutuyla (font-size) ilişkilidir.
Units

CSS Unitless Numbers (Birimsiz Sayılar)

CSS'te bazı özellikler birim gerektirmeyen saf sayı değerleri kabul eder. Bu "unitless numbers" kavramı, CSS'in temel mekaniklerinden biridir. Özellik Unitless kabul eder mi? Örnek Açıklama line-height ✔ line-height: 1.4; Font yüksekliği ile çarpılan oran. z-index ✔ z-index: 10; Katman sırası. opacity ✔
Doğuhan ELMA

Doğuhan ELMA in Units

0
Functions

CSS calc() Fonksiyonu

calc() fonksiyonu, CSS'te matematiksel hesaplamalar yapmamızı sağlayar. calc() CSS fonksiyonu, modern web tasarımında en çok duyarlı (responsive), esnek (flexible) ve hassas (precise) düzenler oluşturmak amacıyla kullanılır. Sabit birimler (px, pt, cm gibi) → viewport değişse bile değişmez. Örneğin calc(100px + 50px) her zaman 150px olur. Göreceli birimler (%, vw, vh, em, rem gibi) → viewport veya parent(mesela javascript ile) element boyutu değiştiğinde yeniden hesapl
Functions

CSS min() ve max() Fonksiyonları

Modern CSS'in en güçlü araçlarından ikisi olan min() ve max() fonksiyonları, responsive tasarımda dinamik değerler oluşturmamızı sağlıyor. Temel Mantık min() fonksiyonu: Verilen değerlerden en küçüğünü seçer max() fonksiyonu: Verilen değerlerden en büyüğünü seçer /* min() - en küçük değeri kullanır */ width: min(500px, 100%); /* Ekran 500px'den küçükse 100% kullanır, büyükse 500px kullanır */ /* max() - en büyük değeri kullanır */ width: max(300px, 50%); /* 50% değeri 300px'den küç
Units

CSS'de PX (Pixel) Birimi

Pixel, CSS'in en eski ve en tartışmalı birimidir. "Absolute unit" olarak sınıflandırılsa da, aslında durum biraz daha karmaşık. Detaylı açıklayayım. 1. PX Nedir? (Teknik Gerçek) CSS Pixel ≠ Fiziksel Pixel CSS Pixel (Reference Pixel) ↓ Device Independent Pixel (DIP) ↓ Physical Pixel (gerçek ekran pikselleri) Önemli: 1px CSS'de her zaman aynı fiziksel boyut DEĞİLDİR! Pixel Density (DPR - Device
Doğuhan ELMA

Doğuhan ELMA in Units

0
Units

CSS'de % (Yüzde) Birimi

Yüzde birimi CSS'in en eski ve en esnek birimlerinden biri. CSS’in ilk günlerinden beri vardır. Ancak neye göre yüzde olduğu her property'de farklı! Detaylı açıklayayım.  Responsive tasarım için idealdir. Parent boyutuna göre otomatik uyum sağlar. Tarayıcı yeniden boyutlandığında değerler otomatik güncellenir → reflow tetiklenir. 1. % Birimi Temel Mantığı % her zaman bir referans değere göre hesaplanır. .child { width: 50%; /* Neyin
Doğuhan ELMA

Doğuhan ELMA in Units

0
Typography

font-size Özelliği - CSS

font-size, CSS’te bir metnin yazı tipi boyutunu belirleyen özelliktir. Yani sayfadaki bir yazının ne kadar büyük veya küçük görüneceğini kontrol edersin. Modern web geliştirmede font-size konusu ciddi bir evrim geçirdi. Detaylı açıklayayım. 1. Birimler ve Temel Kavramlar Absolute (Mutlak) Birimler /* PX - Pixel */ p { font-size: 16px; } ❌ Tarayıcı ayarlarına duyarlı değil ❌ Kullanıcı font tercihlerini görmezde
Functions

clamp() Function - CSS

clamp() fonksiyonu, modern CSS'in en güçlü ve kullanışlı araçlarından biri. Responsive tasarımda "fluid but constrained" (akışkan ama sınırlı) değerler oluşturmanıza olanak tanır. clamp() Nedir? clamp() üç parametre alır ve ortadaki değeri, minimum ve maksimum sınırlar arasında tutar: clamp(MIN, PREFERRED, MAX) Mantık: Eğer PREFERRED < MIN ise → MIN kullanılır Eğer PREFERRED > MAX ise → MAX kullanılır Eğer MIN ≤ PREFERRED ≤ MAX ise → PREFERRED kullanıl
Responsive

Viewport-Relative Units - CSS

Viewport Nedir? Viewport, tarayıcıda web sayfasının görünen alanıdır. Basitçe söylemek gerekirse, kullanıcının ekranında gördüğü sayfa bölgesidir. Dolayısıyla pencereyi küçültüp büyüttükçe bu değerler dinamik olarak yeniden hesaplanır. Viewport değişince CSS’te: vw, vh, vmin, vmax, svh, lvh, dvh gibi birimler yeniden hesaplanır. Media queries tetiklenir. Container queries yeniden değerlendirilir. Safe-area env variables güncellen
Elements

H1 Elementi: Browser Defaults'tan Modern CSS'e

Heading(h1,h2,h3,h4,h5,h6) elementlerini sayfamızda kullanırken CSS'de stil uygularız. Bu uygulanan stillerin ne olduğunu bilmek için tarayıcının h1 elementine default olarak uyguladığı stilleri bilmek gerektirir. Çünkü başlangıç noktamız tarayıcı stilleridir. 1. Browser User Agent Stylesheet (Tarayıcı Varsayılan Stilleri) Chrome/WebKit Default Styles /* Chrome'un h1 için varsayılan stilleri */ h1 { display: block; font-size: 2em; margin-block-start: 0.67em; margin-b
Fundamentals

CSS'te Relative Units (Göreceli Birimler) - CSS

Relative units, bir öğenin boyutunu başka bir değere göre belirleyen birimlerdir. Sabit (absolute) birimlerden farklı olarak, responsive tasarım için çok daha uygun ve esnek çözümler sunarlar. Ana Relative Units rem (root em) Root element'in (html) font-size'ına göre hesaplanır 1rem = html'in font-size değeri (genelde 16px) En çok kullanılan ve önerilen birim html { font-size: 16px; /* 1rem = 16px */ } .container { padding: 2rem; /* 32px */ margin-bott
Class

BEM Metodolojisi Nedir? - CSS

BEM (Block Element Modifier), Yandex tarafından geliştirilen bir CSS isimlendirme ve mimari metodolojisidir. Amacı, kodun okunabilir, yeniden kullanılabilir ve ölçeklenebilir olmasını sağlamaktır. BEM'in Üç Bileşeni 1. Block (Blok) Bağımsız, kendi başına anlamlı bir bileşendir. .card { } .menu { } .header { } .button { } .search-form { } Özellikler: Tekrar kullanılabilir Bağımsız çalışabilir İç içe yerleştirilebilir Kebab-case ile yazılır
Doğuhan ELMA

Doğuhan ELMA in Class

0
Properties

Style Leak (Stil Sızıntısı)

STYLE LEAK NEDİR? Style Leak (Stil Sızıntısı), bir componentin veya modülün CSS stil kurallarının, olmaması gereken yerlere sızması ve istenmeyen elementleri etkilemesidir. TEMEL PROBLEM <!-- Component 1: Card --> <div class="card"> <h2>Başlık</h2> <p>İçerik</p> </div> <!-- Component 2: Sidebar --> <div class="sidebar"> <h2>Sidebar Başlığı</h2> <p>Sidebar içeriği</p> </div> /* Card
Properties

CSS Rule - CSS Kuralı

Bir CSS Rule (kural), bir veya daha fazla HTML elementine stil vermek için yazılan tam bir CSS ifadesidir. ANATOMY (Anatomisi) selector { property: value; }   Detaylı Anatomi: /* ┌─ SELECTOR (Seçici) │ ▼ */ h1 { /* ← Opening brace (Açılış süslü parantezi) */ color: blue; /* ← Declaration (Bildirim) */ font-size: 24px; /* ← Başka bir declaration */ } /* ← Closing brace (Kapanış süslü parantezi) */   Bileşenler:
Properties

CSS Inheritance

1. INHERITANCE NEDİR? Inheritance (Kalıtım), bazı CSS özelliklerinin parent elementlerden child elementlere otomatik olarak geçmesidir. <div style="color: blue; border: 1px solid red;"> <p>Bu metin mavi olur</p> <span>Bu da mavi olur</span> </div> color: blue → Miras alınır (inherit edilir) border: 1px solid red → Miras alınmaz 2. HANGİ ÖZELLİKLER MIRAS ALINIR? Miras Alınan Özellikler (Inherited Properties) Tipogra
Cascade

CSS Selectors

1. TEMEL SELECTORS (Basic Selectors) Universal Selector * { margin: 0; padding: 0; } /* Sayfadaki TÜM elementleri seçer */   Type Selector (Element Selector) div { background: blue; } /* Tüm <div> elementlerini seçer */   Class Selector .button { padding: 10px; } /* class="button" olan tüm elementleri seçer */ .header.active { /* Hem header hem active class'ına sahip elementler */ }   ID Selector #main-header { font-size: 24
HTTP

HTTP Geçmişi

HTTP/0.9 (1991) - "One-line Protocol" Temel Özellikler Tek Metod: GET - Sadece GET isteği yapılabiliyordu Tek Döküman Tipi: HTML - Yalnızca HTML dosyaları alınabiliyordu Başlıksız İletişim - HTTP header kavramı yoktu Tek Satır İstek - GET /sayfa.html formatında Durum Kodu Yok - Başarı/hata bilgisi yoktu Versiyon Belirtme Yok - HTTP/0.9 yazılmıyordu bile Bağlantı Modeli Her istek için yeni TCP bağlantısı açılıp kapatılıyordu İs
Doğuhan ELMA

Doğuhan ELMA in HTTP

0
Tarayıcı (Browser)

Critical Rendering Path (Kritik İşleme Yolu)

Critical Rendering Path (Kritik İşleme Yolu), bir tarayıcının yazdığınız HTML, CSS ve JavaScript kodunu alıp kullanıcının ekranında görebileceği piksellere dönüştürme sürecindeki adımların tamamıdır. Bu yolun hızlı olması, web sitenizin performansını ve kullanıcı deneyimini (özellikle LCP - Largest Contentful Paint gibi Core Web Vitals metriklerini) doğrudan etkiler.   1. HTML'i Oku → DOM Ağacı Oluştur Tarayıcı HTML'i satır satır okur ve bir ağaç yapısı oluşturur. <div&
Tarayıcı (Browser)

Tarayıcı ve Sunucu Networking Aşaması

Networking Aşaması Tarayıcının bir URL'den HTML içeriğini alması sürecidir. 1. URL Parsing (URL Ayrıştırma) Kullanıcı bir URL girdiğinde veya link tıkladığında, tarayıcı önce URL'i parçalarına ayırır: https://herseyibul.com:443/path/page.html?id=123#section └─┬─┘ └────┬────────┘└┬┘└─────┬───────┘ └──┬──┘└──┬──┘ Protocol Host Port Path Query Fragment 2. DNS Lookup (DNS Sorgusu) DNS Resolution Süreci: Domain adı(host) IP adresine çevrilir. Tarayıcı
Cascade

CSS’in ‘C’si “Cascade”

"Cascade" (Çağlayan veya Basamaklanma), CSS'in "C" harfini oluşturan temel ve en önemli kavramdır. Bir HTML elemanına birden fazla stil kuralı uygulanmaya çalıştığında, hangi kuralın "kazanacağını" ve son sözü söyleyeceğini belirleyen algoritmadır.   Resim Kaynağı: https://css-tricks.com/css-cascade-layers/   Çağlayanın Temel Amacı: Hangi Stil Kazanacak? Bir p etiketimiz olduğunu düşünün. Bu etikete stil veren kurallar şunlar olabilir: Tarayıcının kendi

  • Blogs

    • PHP

      • 2
        entries
      • 0
        comments
      • 81
        views

    • Javascript

      • 0
        entries
      • 0
        comments
      • 8
        views

    • HTML

      • 2
        entries
      • 0
        comments
      • 81
        views

    • CSS

      • 21
        entries
      • 0
        comments
      • 418
        views

    • Linux

      • 0
        entries
      • 0
        comments
      • 10
        views
×
×
  • Create New...

Important Information

  I accept