Chrome’dan Etkileyici Yeni Bir Özellik Daha

9 Aralık 2025 Osman Selçok

Özellikle çoklu görev (multitasking) ile boğuşan yazılım geliştiriciler ve yoğun internet kullanıcıları için bu özellik bir “oyun değiştirici” olabilir. Bilişim profesyonelleri okuyucularımız için, hem teknik detayları hem de UX (Kullanıcı Deneyimi) tarafını ele alan kapsamlı bir haber/makale yazısı hazırladık.

İşte haber sitemizin okuyucuları için hazırladığımız makalemiz:

Chrome’da Verimlilik Devrimi: “Bölünmüş Görünüm” Özelliği ve Yazılım Dünyasına Etkileri

Tarayıcı savaşlarında “sekme yönetimi” ve “verimlilik” her zaman ön planda olmuştur. Google Chrome, kullanıcı deneyimini bir üst seviyeye taşıyan yeni özelliği Bölünmüş Görünüm (Split View) ile ezber bozmaya hazırlanıyor. Artık iki farklı sayfayı görüntülemek için iki ayrı pencere açmaya veya sürekli sekmeler arasında geçiş yapmaya son.

Bu özellik, son kullanıcılar için büyük bir kolaylık sağlarken, yazılım geliştiriciler ve web tasarımcıları için de iş akışlarını doğrudan etkileyecek potansiyele sahip.

Bölünmüş Görünüm Nedir ve Nasıl Çalışır?

Bölünmüş görünüm, en basit tabiriyle iki web sayfasını tek bir sekme içerisinde yan yana (side-by-side) yerleştirmenize olanak tanır. Bu özellik, ekranı ikiye bölerek seçenekleri karşılaştırmanızı, bir yandan dokümantasyon okurken diğer yandan kod incelemenizi veya video izlerken not almanızı sağlar.

Özelliği kullanmak oldukça basittir ve iki temel yöntemle aktif edilebilir:

Sürükle-Bırak Yöntemi: Başka bir sekmeyi ya da bağlantıyı, mevcut tarayıcı pencerenizin sol veya sağ kenarına sürükleyerek anında bölme oluşturabilirsiniz.
Bağlantı Menüsü: Herhangi bir bağlantıya sağ tıklayıp açılan menüden “Bağlantıyı bölünmüş görünümde aç” seçeneğini seçebilirsiniz.

Yazılım Geliştiriciler İçin Neden Kritik?

Bilişim profesyonelleri için ekran alanı (screen real estate) altından değerlidir. Çift monitör kullanan geliştiriciler bile tarayıcı sekmeleri arasında kaybolabilir. Bölünmüş görünüm, geliştiricilere şu somut faydaları sunuyor:

1. Canlı Önizleme ve Debugging Kolaylığı

Frontend geliştiriciler için yapılan değişikliğin anlık takibi hayati önem taşır. Bölünmüş görünüm sayesinde, bir tarafta uygulamanın canlı önizlemesi açıkken, diğer tarafta proje yönetim aracı (Jira, Trello) veya GitHub “Pull Request” detayları görüntülenebilir.

2. Dokümantasyon ve Uygulama

Yeni bir kütüphane veya API öğrenirken, geliştiriciler genellikle “Örnek Kod” ve “Kendi Editörleri/Test Ortamları” arasında mekik dokurlar. Bu özellik sayesinde API dokümantasyonunu (örneğin Swagger veya MDN Web Docs) bir panele, çalışan web uygulamasını diğer panele sabitleyerek bağlamdan kopmadan çalışma imkanı doğar.

3. Responsive Tasarım Testleri (Basitleştirilmiş)

Her ne kadar DevTools gelişmiş simülasyonlar sunsa da, bölünmüş görünüm, geliştiricinin uygulamanın daraltılmış (mobile-view benzeri) bir alanda nasıl tepki verdiğini (“squish” davranışı) hızlıca görmesini sağlar. Web uygulamanızın, ekran ikiye bölündüğünde de UX standartlarını koruyup korumadığını test etmek için en doğal ortamdır.

Web Uygulamalarında Kullanıcı Deneyimi (UX) Etkisi

Bölünmüş görünüm sadece geliştiriciler için değil, geliştirdiğimiz uygulamaları kullanan son kullanıcılar için de dijital alışkanlıkları değiştiriyor. Web uygulamaları tasarlarken artık kullanıcıların bu “daraltılmış” görünümleri kullanacağını hesaba katmalıyız.

Karşılaştırmalı Alışveriş ve Analiz: E-ticaret sitelerinde kullanıcılar artık iki farklı ürünü yan yana koyarak teknik özelliklerini kıyaslayabilir.
Öğrenme ve Uygulama: Eğitim teknolojileri (EdTech) platformlarında, bir yanda ders videosu izlenirken diğer yanda interaktif test çözülebilir.
İçerik Üretimi: Bir CMS (İçerik Yönetim Sistemi) kullanıcısı, kaynak haber sitesini sol tarafa, yazı editörünü sağ tarafa alarak veri girişi yapabilir.

Geliştiricilere Not: “Container Queries” Dönemi

Kullanıcıların bu özelliği sıkça kullanmaya başlamasıyla birlikte, web tasarımcıları için CSS Container Queries kullanımı daha da önem kazanacak. Artık sadece ekran boyutuna (@media) göre değil, bileşenin içinde bulunduğu konteynerin boyutuna göre tasarım yapmak, bölünmüş görünümde kusursuz bir deneyim sunmanın anahtarı olacak.

Chrome’un bu özelliği onu sadece bir “gezinti aracı” olmaktan çıkarıyor

Chrome’un bölünmüş görünüm özelliği, tarayıcıyı sadece bir “gezinti aracı” olmaktan çıkarıp, daha güçlü bir “çalışma istasyonuna” dönüştürüyor. Bilişim dünyası için bu, daha az sekme karmaşası, daha yüksek odaklanma ve daha verimli kodlama/test süreçleri anlamına geliyor.

Bu yeni akışa uygulamalarınızı bugünden hazırlamaya başlamakta fayda var.

Sizin için yapabileceğim bir sonraki adım:

Bu yazıyı zenginleştirmek adına, yazılım geliştiricilerin “Container Queries” kullanarak bölünmüş görünüme nasıl uyum sağlayabileceğini gösteren kısa, teknik bir kod örneği (snippet) eklemek istedik.

Teknik Odak: Bölünmüş Görünüm ve “Container Queries”

Chrome’un bölünmüş görünüm özelliği (Split View), responsive tasarım alışkanlıklarımızı yeniden gözden geçirmemizi gerektiriyor. Geleneksel Media Queries (@media), tarayıcının toplam pencere genişliğine (viewport) bakar. Ancak kullanıcı ekranı ikiye böldüğünde, tarayıcı penceresi geniş olsa bile web uygulamanızın yaşadığı alan yarıya iner.

İşte tam bu noktada CSS Container Queries (@container) devreye giriyor. Bu yöntem, ekran boyutuna değil, bileşenin içinde bulunduğu “kapsayıcının” (container) genişliğine tepki verir.

Aşağıdaki örnekte, bir ürün kartının bölünmüş görünümde (dar alanda) otomatik olarak nasıl dikey hizalamaya geçtiğini görebilirsiniz:

CSS

/* 1. Kapsayıcıyı Tanımlama */
.urun-listesi-wrapper {
  /* Bu kapsayıcının boyut değişikliklerini izlemesini sağlıyoruz */
  container-type: inline-size;
  container-name: urunKarti;
}

.urun-karti {
  display: flex;
  flex-direction: row; /* Normalde yan yana (Görsel + Metin) */
  gap: 20px;
}

/* 2. Bölünmüş Görünüm İçin Kural Yazma */
/* Eğer kapsayıcı alan 500px'in altına düşerse (Örn: Split View açıldığında) */
@container urunKarti (max-width: 500px) {
  .urun-karti {
    flex-direction: column; /* İçeriği alt alta sırala */
    text-align: center;
  }
  
  .urun-gorseli {
    width: 100%; /* Görseli tam genişliğe yay */
  }
}

Neden Önemli? Bu kod sayesinde, kullanıcı Chrome’da ekranı böldüğü anda, geliştirici ekstra bir JavaScript kodu yazmadan arayüzün akışkan bir şekilde yeni alana uyum sağlamasını garanti eder. Bu, “Mobile-First” yaklaşımından “Content-First” yaklaşımına geçişin en net örneğidir.