CSS Container Queries: \u0130\u00e7erik Boyutuna G\u00f6re Tasar\u0131m<\/p>\n
Responsive web tasar\u0131m\u0131nda, farkl\u0131 ekran boyutlar\u0131na g\u00f6re web sayfan\u0131z\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ayarlamak i\u00e7in genellikle medya sorgular\u0131 (media queries) kullan\u0131r\u0131z. Ancak, bu y\u00f6ntem her zaman yeterli olmayabilir. \u00d6zellikle i\u00e7 i\u00e7e ge\u00e7mi\u015f bile\u015fenlerde, ana kapsay\u0131c\u0131n\u0131n boyutuna g\u00f6re alt bile\u015fenlerin d\u00fczenini ayarlamak zor olabilir. \u0130\u015fte bu noktada devreye CSS Container Queries<\/strong> giriyor.<\/p>\n Container queries, bir kapsay\u0131c\u0131n\u0131n boyutuna g\u00f6re, o kapsay\u0131c\u0131n\u0131n i\u00e7indeki<\/em> elementlerin stilini de\u011fi\u015ftirmenizi sa\u011flar. Bu sayede, ana kapsay\u0131c\u0131n\u0131n boyutuna ba\u011fl\u0131 olarak, i\u00e7erik d\u00fczeni otomatik olarak ayarlan\u0131r. \u00d6rne\u011fin, bir kart\u0131n geni\u015fli\u011fi de\u011fi\u015ftik\u00e7e, i\u00e7indeki metin ve resimlerin nas\u0131l yerle\u015ftirilece\u011fini container queries ile kolayca kontrol edebilirsiniz. Ba\u015fka bir deyi\u015fle, bu \u00f6zellik sayesinde, ana kapsay\u0131c\u0131n\u0131n boyutuna g\u00f6re i\u00e7erik d\u00fczenleme esnekli\u011fine sahip oluyoruz.<\/p>\n Container queries’i kullanmak olduk\u00e7a basittir. \u00d6ncelikle, kapsay\u0131c\u0131n\u0131z\u0131n contain \u00f6zelli\u011fine layout de\u011ferini ataman\u0131z gerekir. Daha sonra, i\u00e7erik elementlerinde normal CSS kurallar\u0131n\u0131 kullanarak, kapsay\u0131c\u0131n\u0131n boyutuna ba\u011fl\u0131 olarak stiller tan\u0131mlayabilirsiniz. <\/p>\n Yukar\u0131daki \u00f6rnekte, .container s\u0131n\u0131f\u0131na sahip element, container query’nin uygulanaca\u011f\u0131 kapsay\u0131c\u0131d\u0131r. contain: layout; sat\u0131r\u0131, bu kapsay\u0131c\u0131n\u0131n i\u00e7eriklerinin boyutuna g\u00f6re stil uygulamas\u0131na izin verir. Daha sonra, i\u00e7erik elementlerine, kapsay\u0131c\u0131n\u0131n boyutuna g\u00f6re farkl\u0131 stiller uygulayabiliriz. Ayr\u0131ca, media queries ile birlikte de container queries kullanabilirsiniz. Bu, hem ekran boyutuna hem de kapsay\u0131c\u0131n\u0131n boyutuna ba\u011fl\u0131 olarak \u00f6zelle\u015ftirilmi\u015f bir d\u00fczen olu\u015fturman\u0131za olanak sa\u011flar. <\/p>\n Container queries, responsive tasar\u0131m s\u00fcrecinizi \u00f6nemli \u00f6l\u00e7\u00fcde kolayla\u015ft\u0131r\u0131r. \u00d6ncelikle, karma\u015f\u0131k medya sorgu zincirlerinden kurtulman\u0131za yard\u0131mc\u0131 olur. Ayr\u0131ca, kodun daha okunabilir ve s\u00fcrd\u00fcr\u00fclebilir olmas\u0131n\u0131 sa\u011flar. Son olarak, daha dinamik ve kullan\u0131c\u0131 dostu bir web deneyimi sunman\u0131za olanak tan\u0131r. Bu \u00f6zellik, \u00f6zellikle bile\u015fen tabanl\u0131 geli\u015ftirmelerde b\u00fcy\u00fck bir avantaj sunuyor. B\u00f6ylece, bile\u015fenlerinizin farkl\u0131 boyutlarda nas\u0131l davranaca\u011f\u0131n\u0131 kolayca kontrol edebilirsiniz.<\/p>\n Container queries’in kullan\u0131labilece\u011fi bir\u00e7ok alan vard\u0131r. Bunlardan baz\u0131lar\u0131 \u015funlard\u0131r; kartlar, listeler, galeri \u00f6\u011feleri ve i\u00e7 i\u00e7e ge\u00e7mi\u015f bile\u015fenler. \u00d6rne\u011fin, bir e-ticaret sitesindeki \u00fcr\u00fcn kartlar\u0131n\u0131n geni\u015fli\u011fine g\u00f6re \u00fcr\u00fcn\u00fcn foto\u011fraf\u0131n\u0131n ve bilgisinin nas\u0131l g\u00f6r\u00fcnt\u00fclenece\u011fini kontrol etmek i\u00e7in container queries kullan\u0131labilir. Ba\u015fka bir uygulama \u00f6rne\u011fi de, blog yaz\u0131lar\u0131nda, i\u00e7erik geni\u015fli\u011fine g\u00f6re yaz\u0131 s\u00fctunlar\u0131n\u0131n say\u0131s\u0131n\u0131 de\u011fi\u015ftirmek olabilir. Sonu\u00e7 olarak, esnek ve dinamik web uygulamalar\u0131 olu\u015fturmak i\u00e7in container queries olduk\u00e7a faydal\u0131 bir ara\u00e7t\u0131r.<\/p>\n Daha fazla bilgi ve \u00f6rnek i\u00e7in web sitemi<\/a> ziyaret edebilirsiniz. Ayr\u0131ca, bu konuda daha fazla bilgi edinmek i\u00e7in bu makaleye<\/a> g\u00f6z atabilirsiniz.<\/p>\n #CSS #ContainerQueries #ResponsiveTasar\u0131m #WebTasar\u0131m #CSS\u00d6zellikleri #FatihSoysal #WebGeli\u015ftirme<\/p>\n <\/body>Container Queries Nas\u0131l Kullan\u0131l\u0131r?<\/h2>\n
\n.container {\n contain: layout; \/* Bu sat\u0131r \u00e7ok \u00f6nemli! *\/\n width: 50%;\n}\n\n.container > div {\n \/* Kapsay\u0131c\u0131n\u0131n geni\u015fli\u011fine ba\u011fl\u0131 olarak bu stiller uygulan\u0131r *\/\n}\n\n@media (min-width: 600px) {\n .container {\n width: 75%;\n }\n .container > div {\n \/* Kapsay\u0131c\u0131n\u0131n geni\u015fli\u011fi 600px'ten b\u00fcy\u00fckse farkl\u0131 stiller uygulan\u0131r *\/\n }\n}\n<\/code><\/pre>\nContainer Queries’in Avantajlar\u0131<\/h2>\n
Container Queries’i Nerelerde Kullanabilirim?<\/h2>\n
#Etiketler<\/h3>\n
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"CSS Container Queries: \u0130\u00e7erik Boyutuna G\u00f6re Tasar\u0131m Responsive web tasar\u0131m\u0131nda, farkl\u0131 ekran boyutlar\u0131na g\u00f6re web sayfan\u0131z\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ayarlamak…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-10287","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n