Jump to content

Blogs

CSS

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
CSS

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
CSS

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
CSS

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.
CSS

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
CSS

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
CSS

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üç
PHP

PHP'nin Tarihsel Gelişimi ve Versiyon Evrimi

PHP'nin 30 yıllık evrimini derinlemesine inceleyelim. 1. Başlangıç Dönemi (1994-1997) PHP/FI (Personal Home Page / Forms Interpreter) - 1994 Rasmus Lerdorf tarafından kendi kişisel web sitesini yönetmek için C dilinde yazılan basit CGI scriptleri olarak başladı. İlk versiyonda: Basit değişken sistemi Form işleme yetenekleri Ziyaretçi sayacı gibi temel araçlar PHP/FI 2.0 - 1995-1996 SQL desteği eklendi (mSQL) Gerçek bir programlama dili h
CSS

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
CSS

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
CSS

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
CSS

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
CSS

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
HTML

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
CSS

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
CSS

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
PHP

PHP 8+ ile Encapsulation ve Private Properties

PHP 8+ ile birlikte gelen modern özelliklerle encapsulation (kapsülleme) prensibini derinlemesine inceleyelim. Temel Kavram: Neden Private? Verileri gizleyip davranışı ortaya çıkarmanın amacı: Değişimin kontrolü: Dışarıdan doğrudan erişimi engelleyerek değişiklikleri kontrol edersiniz İç implementasyon özgürlüğü: İç yapıyı değiştirdiğinizde dış kodlar etkilenmez Veri tutarlılığı: Validation ve business logic'i merkezi bir noktada yönetirsiniz PHP 8.0+ Const
Doğuhan ELMA

Doğuhan ELMA in Class

0
CSS

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
CSS

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:
CSS

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
CSS

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
HTML

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
CSS

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&

  • 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