digtools
📦
css-container-query-generator

CSS Container Query
Generator

GUI ile CSS @container sorgularını görsel olarak oluşturun. container-type ayarları, kesme noktaları, önizleme ve medya sorgusu dönüştürücü.

✨
Intuitive GUI
Visually build complex queries
👁️
Live Preview
Instantly verify with resizable preview
🔄
Media Query Converter
Easily replace existing @media rules

Konteyner Ayarları

Ön Ayarlar

Kesme Noktaları

Canlı Önizleme

Oluşturulan Kod

🔄 Medya Sorgusu → Container Query

Bunu da beğenebilirsiniz

✨

CSS View Transition Oluşturucu

🎨

Renk Dönüştürücü

🎨

Görüntü Renk Seçici

about,

CSS Container Query Oluşturucu Hakkında

CSS Container Query Oluşturucu, duyarlı tasarımda (responsive design) yeni standart olan "container queries"i GUI kullanarak görsel olarak oluşturmanızı sağlayan bir geliştirici aracıdır. Medya sorguları görüntü alanı (viewport) genişliğine bağlıyken, konteyner sorguları üst öğenin genişliğine bağlıdır. Bu sayede bileşen bazlı esnek düzenler oluşturabilirsiniz.

Bu araç, container-type ayarları, kesme noktaları ekleme ve canlı önizlemeleri sorunsuz bir şekilde yönetir. Ayrıca mevcut medya sorguları için toplu dönüştürme özelliği sunarak yeni standarda geçişi kolaylaştırır. Her şey güvenli bir şekilde tarayıcınızın içinde çalışır.

how to,

Nasıl Kullanılır

ADIM 1

Konteyner Yapılandırması

Konteyner seçicisini ve container-type'ı ayarlayın. Kesme noktaları (Breakpoints) ekleyin ve konteyner belirli bir boyuta ulaştığında uygulanacak CSS stillerini girin.

ADIM 2

Canlı Önizleme

Konteyneri yeniden boyutlandırmak için önizleme alanının sağ kenarını sürükleyin ve stillerin doğru değiştiğini doğrulayın.

ADIM 3

Kodu Dışa Aktar

Oluşturulan CSS kodunu kopyalayın veya mevcut @media kurallarını @container'a dönüştürmek için aracı kullanın.

glossary,

Container Query Sözlüğü

Container Query (@container)
Üst öğenin boyutuna göre stil değiştiren CSS özelliği.
container-type
Öğeyi bir konteyner olarak tanımlar.
container-name
Bir konteyneri açıkça adlandırmak için kullanılan özelliktir.
Containment
Konteyner sorguları için gerekli olan, bir öğenin düzenini DOM'un geri kalanından izole eden kavramdır.
Inline-axis (Satır içi Eksen)
Metnin aktığı eksen. Yatay yazımda genişliğe karşılık gelir.
Medya Sorgusu (@media)
Pencere boyutuna göre stil uygular.
cqw / cqh / cqi / cqb
vw/vh gibi, konteynerin boyutunun %1'ini temsil eden konteyner sorgularına özel göreceli birimlerdir.
faq,

Sıkça Sorulan Sorular

Q.Verilerim sunucuya gönderiliyor mu?
Hayır. Bu araç tamamen tarayıcınızda (istemci tarafında) çalışır.
Q.Medya sorgusu mu yoksa container query mi kullanmalıyım?
Genel sayfa düzeni (üstbilgiler, vb.) için medya sorgularını; kendi alanına uyum sağlayan bileşenler (kartlar) için konteyner sorgularını kullanın.
Q.Tarayıcı uyumluluğu nedir?
2023'ten beri tüm modern tarayıcılarda (Chrome 105+, Safari 16+) desteklenmektedir.
Q.container-type: size kullanırken dikkat edilmesi gerekenler nelerdir?
Size kullanıldığında blok ekseni (yükseklik) kısıtlaması uygulanır. Açık bir yükseklik belirtmezseniz, öğe sıfır yüksekliğe çökebilir. Genellikle inline-size kullanılması önerilir.
Q.Özel HTML nasıl izole edilir?
Önizleme alanı için Shadow DOM kullanarak CSS çakışmalarını önlüyoruz.
use cases,

Kullanım Durumları

📦

Yeniden Kullanılabilir Kartlar

Bağımsız olarak düzenini ayarlayan kartlar.

🧩

CMS Entegrasyonu

WordPress bileşenlerinin alan genişliğine göre uyum sağlaması.

📊

Gösterge Paneli UI

Grafiklerin dinamik olarak panel boyutuna uyum sağlaması.

🔄

Kod Modernizasyonu

Eski @media bloklarını dönüştürme.

tech,

Teknik Belgeler

Container Queries, @container kuralı ile container-type özelliğinin birleştirilmesiyle elde edilir.

Farklar

Medya sorguları tüm ekran boyutuna göre çalışırken, konteyner sorguları bileşenin kendi ebeveyn genişliğine göre çalışır.

İlgili Araçlar

CSS OluşturucularTümünü gör
✨

CSS View Transition Oluşturucu

View Transition API animasyonlarını simüle edin ve SPA ve MPA için kod oluşturun.

🎨

Renk Dönüştürücü

HEX/RGB/HSL/CMYK kodlarını dönüştürün ve renk paletleri oluşturun.

🎨

Görüntü Renk Seçici

Görüntülerden renkleri çıkarın ve renk kodlarını alın (HEX/RGB)

↔️

CSS Clamp Oluşturucu

Duyarlı tasarım için akıcı clamp() işlev değerlerini otomatik olarak hesaplar.

✂️

CSS clip-path Oluşturucu

Sürükle bırak işlemleriyle kolayca CSS clip-path şekilleri oluşturun ve kod üretin.

🖼️

CSS Filtre ve Karışım Oluşturucu

Filtreleri görsel olarak birleştirin, kod oluşturun ve görüntüleri kaydedin.

🎨

CSS Degrade Oluşturucu

Doğrusal, radyal, konik degradeleri ve desenleri sezgisel olarak oluşturun.

📐

Flexbox/Grid Düzen Oluşturucu

Görsel GUI ile düzen kodu oluştur

☁️

Box-Shadow Oluşturucu

Sezgisel şekilde güzel çok katmanlı gölgeler oluştur

Tüm Kategoriler

Web & Geliştirici Araçları CSS Oluşturucular Görüntü ve Fotoğraf Araçları Video ve Ses Araçları SEO & Pazarlama Ağ & Altyapı Metin Analizi ve İşleme Finans ve Maaş Araçları Tarih ve Takvim Araçları Belge ve İş Araçları Oyunlar ve Etkinlikler Yaşam ve Sağlık Ana Sayfa

🔍 Tam Ekran

Geri Bildirim Gönder

Aracı geliştirmemize yardımcı olmak için lütfen düşüncelerinizi bize bildirin.

Sorumluluk Reddi

Bu sitede sunulan araçların tamamı ücretsiz kullanılabilir; ancak kendi sorumluluğunuzda kullanınız. Herhangi bir hesaplama sonucu, dönüşüm sonucu veya oluşturulan verinin doğruluğu, eksiksizliği ya da güvenliği konusunda hiçbir garanti vermiyoruz. Bu araçların kullanımından kaynaklanabilecek zarar veya sorunlar için işletmecinin herhangi bir sorumluluk kabul etmediğini lütfen bilin. Araçların çoğu dosyaları ve hesaplamaları tarayıcınızda yerel olarak işler; bu, girdiğiniz verilerin sunucularımıza gönderilmediği veya depolanmadığı anlamına gelir.