CSS Izgara Düzeni ile En İyi Uygulamalar

İnsanlar artık üretimde CSS Izgara Düzeni kullandığına göre, giderek yaygınlaşan bir soru, "En iyi uygulamalar nelerdir?" gibi görünüyor. Bu sorunun kısa cevabı, şartnamede tanımlandığı gibi mizanpaj yöntemini kullanmaktır. Kullanmayı seçtiğiniz spesifikasyonun belirli bölümleri ve aslında Grid'i Flexbox gibi diğer yerleşim yöntemleriyle nasıl birleştireceğiniz, oluşturmaya çalıştığınız kalıplar için neyin işe yaradığına ve sizin ve ekibinizin nasıl çalışmak istediğinize bağlıdır.

Daha derine baktığımda, belki de bu "en iyi uygulamalar" talebinin, belki de öncekinden çok farklı bir yerleşim yöntemi kullanma konusundaki güven eksikliğini gösterdiğini düşünüyorum. Belki de Grid'i tasarlanmadığı şeyler için kullanmamız veya Grid'i kullanmamız gerektiği zaman kullanmama endişesi. Belki de eski tarayıcıları destekleme konusundaki endişelerden veya Grid'in geliştirme iş akışımıza nasıl uyduğuna bağlı.

Bu makalede, en iyi uygulamalar olarak tanımlanabilecek bazı şeyleri ve muhtemelen endişelenmenize gerek olmayan bazı şeyleri ele almaya çalışacağım.

Anket

Bu makaleyi bilgilendirmek için, diğer insanların üretimde Grid Layout'u nasıl kullandığını, karşılaştıkları zorlukların neler olduğunu, bu konuda gerçekten nelerden keyif aldıklarını öğrenmek istedim. Kullanılan ortak sorular, sorunlar veya yöntemler var mıydı? Öğrenmek için, insanların Grid Layout'u nasıl kullandıkları ve özellikle neleri en çok sevdikleri ve neleri zor buldukları hakkında sorular sorarak hızlı bir anket hazırladım.

Takip eden makalede, bu yanıtlardan bazılarına atıfta bulunacağım ve doğrudan alıntı yapacağım. Ayrıca, açıklanan teknikler hakkında daha fazla bilgi edinebileceğiniz birçok başka kaynağa da bağlantı vereceğim. Görünen o ki, anket yanıtlarında paketlenecek ilginç şeyler değerinde birden fazla makale vardı. Gelecek bir yazıda ortaya çıkan diğer şeylerden bazılarına değineceğim.

Ulaşılabilirlik

Izgara spesifikasyonunun kullanırken dikkat etmeniz gereken herhangi bir parçası varsa, içeriğin yeniden sıralanmasına neden olabilecek herhangi bir şeyi kullanırken:

“Yazarlar, içeriğin mantıksal olarak değil, yalnızca görsel olarak yeniden düzenlenmesi için düzen ve ızgara yerleştirme özelliklerini kullanmalıdır. Mantıksal yeniden sıralama yapmak için bu özellikleri kullanan stil sayfaları uygun değildir.”

— Izgara Spesifikasyonu: Yeniden sipariş verme ve Erişilebilirlik

Bu, Grid'e özgü değildir, ancak içeriği iki boyutta bu kadar kolay yeniden düzenleme yeteneği, Grid için daha büyük bir sorun haline getirir. Bununla birlikte, içeriğin yeniden sıralanmasına izin veren herhangi bir yöntem kullanıyorsanız - Grid, Flexbox veya hatta mutlak konumlandırma gibi - görsel deneyim ile içeriğin belgede nasıl yapılandırıldığı arasındaki bağlantısını kesmemeye dikkat etmeniz gerekir. Ekran okuyucular (ve yalnızca klavye kullanarak belgede gezinen kişiler) kaynaktaki öğelerin sırasını izleyecektir.

Flexbox'ta sırayı tersine çevirmek için flex-direction kullanırken özellikle dikkatli olmanız gereken yerler; Flexbox veya Grid'deki order özelliği; Öğeleri belgedeki mantıksal sıranın dışına taşıyorsa, herhangi bir yöntemi kullanarak Izgara öğelerinin herhangi bir yerleşimi; ve grid-auto-flow yoğun paketleme modunu kullanmak.

Bu sorun hakkında daha fazla bilgi için aşağıdaki kaynaklara bakın:

• Izgara Düzeni ve Erişilebilirlik - MDN
• Flexbox ve klavye gezinme bağlantısının kesilmesi

Hangi Grid Düzen Yöntemlerini Kullanmalıyım?

”Grid'de bu kadar çok seçenek varken, tutarlı bir yazma yöntemine bağlı kalmak (örneğin ızgara çizgilerini adlandırmak veya adlandırmamak, ızgara şablon alanlarını, yedekleri, medya sorgularını tanımlamak) ve böylece bütün tarafından korunabilmesi için zordu. takım."

— Michelle Barker

Grid'e ilk baktığınızda, bir düzen oluşturmanın pek çok farklı yolu ile bunaltıcı görünebilir. Ancak nihayetinde, her şey ızgaranın bir satırından diğerine konumlandırılan şeylere gelir. Elde etmeye çalıştığınız düzenin yanı sıra ekibiniz ve oluşturduğunuz site için neyin iyi çalıştığına dayalı seçenekleriniz var.

Doğru ya da yanlış yol yoktur. Aşağıda, kafa karışıklığının ortak temalarından bazılarını ele alacağım. Ayrıca daha önce “Grid Yakalamalar ve Engeller” başlıklı bir makalemde diğer birçok olası karışıklık alanını ele almıştım.

Bir Örtük Veya Açık Izgara Kullanmalı mıyım?

Izgara grid-template-columns ve grid-template-rows ile tanımladığınız ızgara, Açık Izgara olarak bilinir. Açık Izgara, Izgaradaki satırların isimlendirilmesini sağlar ve ayrıca size ızgaranın son satırını -1 ile hedefleme yeteneği verir. Bu şeylerden herhangi birini yapmak için bir Açık Izgara seçeceksiniz ve genel olarak tamamı tasarlanmış bir düzeniniz olduğunda ve ızgara çizgilerinizin nereye gitmesi gerektiğini ve izlerin boyutunu tam olarak bildiğinizde.

Satır izleri için en sık Örtük Izgarayı kullanırım. Sütunları tanımlamak istiyorum, ancak satırlar yalnızca otomatik olarak boyutlandırılacak ve içeriği içerecek şekilde büyüyecek. Örtük Izgarayı grid-auto-columns ve grid-auto-rows ile bir dereceye kadar kontrol edebilirsiniz, ancak her şeyi tanımlamanızdan daha az kontrole sahipsiniz.

Tam olarak ne kadar içeriğe sahip olduğunuzu ve dolayısıyla satır ve sütun sayısını bilip bilmediğinize karar vermeniz gerekir - bu durumda Açık Izgara oluşturabilirsiniz. Ne kadar içeriğiniz olduğunu bilmiyorsanız, ancak yalnızca var olanı tutmak için satırlar veya sütunlar oluşturmak istiyorsanız, Örtük Izgarayı kullanacaksınız.

Bununla birlikte, ikisini birleştirmek mümkündür. Aşağıdaki CSS'de, Açık Izgarada üç sütun ve üç satır tanımladım, bu nedenle içeriğin ilk üç satırı aşağıdaki gibi olacaktır:

• En az 200 piksel yüksekliğinde, ancak içeriğin daha uzun olması için genişleyen bir parça,
• 400 piksel yüksekliğinde sabitlenmiş bir parkur,
• En az 300 piksel yüksekliğinde (ancak genişler) bir parça.

Daha fazla içerik, Örtük Izgarada oluşturulan bir satıra gidecek ve bu izleri en az 300 piksel uzunluğunda yapmak için grid-auto-rows özelliğini kullanıyorum ve auto olarak genişletiyorum.

 .grid { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: minmax(200px auto) 400px minmax(300px, auto); grid-auto-rows: minmax(300px, auto); grid-gap: 20px; }

Esnek Sayıda Sütunlu Esnek Bir Izgara

Tekrar Gösterimi, otomatik doldurma ve minmax'ı kullanarak, bir kapsayıcıya sığabilecek sayıda parçadan oluşan bir model oluşturabilir, böylece Medya Sorgularına olan ihtiyacı bir ölçüde ortadan kaldırabilirsiniz. Bu teknik, bu video eğitiminde bulunabilir ve aynı zamanda "2018'de Duyarlı Tasarım İçin Medya Sorgularını Kullanma" adlı son makalemde benzer fikirlerle birlikte gösterilmiştir.

Daha az alan olduğunda içeriğin önceki içeriğin altına düşmesinden ve boyutlandırmada çok fazla esnekliğe izin vermekten memnun olduğunuzda bu tekniği seçin. Sütunlarınızın minimum boyutta görüntülenmesini ve otomatik olarak doldurulmasını özellikle istediniz.

Ankette, insanların gerçekten sabit sayıda sütunlu bir ızgara istediklerinde bu yöntemi seçip seçmediklerini merak etmemi sağlayan birkaç yorum vardı. Belirli kesme noktalarında tahmin edilemeyen sayıda sütunla karşılaşıyorsanız, auto-fill veya auto-fit kullanmak yerine sütun sayısını ayarlamanız ve gerektiğinde medya sorgularıyla yeniden tanımlamanız daha iyi olabilir.

Hangi Parça Boyutlandırma Yöntemini Kullanmalıyım?

Parça boyutlandırmayı “O Kutu Ne Kadar Büyük? Izgara Düzeninde Boyutlandırmayı Anlamak”, bununla birlikte, hangi iz boyutlandırma yönteminin kullanılacağı konusunda sık sık sorular alıyorum. Özellikle yüzde boyutlandırma ile fr birimi arasındaki fark soruluyor.

Yalnızca belirtildiği gibi fr birimini kullanırsanız, kullanılabilir alanı dağıttığı için bir yüzde kullanmaktan farklıdır. Bir parçaya daha büyük bir öğe yerleştirirseniz, o zaman fr çalışacağı yol, o parçanın daha fazla yer kaplamasına ve kalanları dağıtmasına izin vermektir.

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; } 

fr biriminin ızgara kapsayıcısındaki tüm alanı dağıtmasını sağlamak için minmax() kullanarak ona minimum 0 boyutu vermeniz gerekir.

 .grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); grid-gap: 20px; }

Böylece, şu senaryolardan herhangi birinde fr kullanmayı seçebilirsiniz: otomatik temelinde (varsayılan davranış) alan dağıtımı istediğiniz ve eşit dağıtım istediğiniz senaryolar. Ben tipik olarak fr birimini kullanırdım çünkü o sizin için boyutlandırmayı çözer ve sabit genişlikteki izlerin veya boşlukların kullanılmasını sağlar. Bunun yerine bir yüzde kullandığım tek zaman, diğer düzen yöntemlerini de kullanan mevcut bir düzene ızgara bileşenleri eklediğim zamandır. Izgara bileşenlerimin yüzdeleri kullanan kayan nokta veya esnek tabanlı bir düzen ile hizalanmasını istiyorsam, bunları ızgara düzenimde kullanmak, her şeyin aynı boyutlandırma yöntemini kullandığı anlamına gelir.

Öğeleri Otomatik Yerleştir veya Konumlarını Ayarla?

Çoğu zaman, düzeninize yalnızca bir veya iki öğe yerleştirmeniz gerektiğini ve geri kalanların içerik sırasına göre yerine oturduğunu göreceksiniz. Aslında bu, kaynak ve görsel gösterimin bağlantısını kesmediğiniz için gerçekten iyi bir test. Otomatik yerleştirmeye bağlı olarak işler hemen hemen yerine düşerse, muhtemelen iyi durumdalar.

Ancak her şeyin nereye gittiğine karar verdiğimde, her şeye bir pozisyon verme eğilimindeyim. Bu, eğer biri belgeye bir şey eklerse ve ızgara bunu otomatik olarak beklenmedik bir yere yerleştirirse, böylece mizanpajı bozarsa, sonunda garip şeylerle karşılaşmayacağım anlamına gelir. Her şey yerleştirilirse, Grid o öğeyi bir sonraki boş ızgara hücresine yerleştirecektir. Bu tam olarak istediğiniz yer olmayabilir, ancak yerleşim planınızın sonunda oturmak, muhtemelen ortaya çıkıp başka şeyleri zorlamaktan daha iyidir.

Hangi Konumlandırma Yöntemi Kullanılır?

Izgara Düzeni ile çalışırken, sonuçta her şey öğeleri bir satırdan diğerine yerleştirmeye gelir. Diğer her şey aslında bunun için bir yardımcıdır.

Çizgileri adlandırmak, Izgara Şablon Alanlarını kullanmak veya farklı düzen türlerinin bir kombinasyonunu kullanmak isteyip istemediğinize ekibinizle birlikte karar verin. Özellikle küçük bileşenler için Izgara Şablon Alanlarını kullanmayı sevdiğimi görüyorum. Ancak, doğru ya da yanlış yoktur. Sizin için en iyisinin ne olduğunu öğrenin.

Diğer Yerleşim Mekanizmaları ile Kombine Izgara

Izgara Düzeni'nin hepsine hükmedecek tek gerçek düzen yöntemi olmadığını, belirli bir düzen türü için, yani iki boyutlu düzen için tasarlandığını unutmayın. Diğer yerleşim yöntemleri hala mevcuttur ve her bir deseni ve ona en uygun olanı düşünmelisiniz.

Bence bu, aslında tasarlanmadıkları bir şeyi yapmalarını sağlamak için yerleşim yöntemlerini hacklemeye alışmış olanlarımız için oldukça zor. Geri adım atmak, tasarlandıkları görevler için yerleşim yöntemlerine bakmak ve bu görevler için bunları kullanmayı unutmamak için gerçekten iyi bir zaman.

Özellikle Grid ve Flexbox hakkında ne sıklıkta yazarsam yazayım, insanların hangisini kullanması gerektiği sorulacak. Her iki düzen yönteminin de mükemmel bir anlam ifade ettiği ve gerçekten size kalmış olduğu birçok model vardır. Grid yerine Flexbox'ı veya Flexbox'a Grid'i seçtiğiniz için kimse size bağırmayacak.

Kendi çalışmamda, öğelerin doğal boyutunun yerleşimlerini güçlü bir şekilde kontrol etmesini, esasen diğer öğeleri etrafa itmesini istediğim bileşenler için Flexbox kullanma eğilimindeyim. Ayrıca, Box Alignment özelliklerinin yalnızca Flexbox ve Grid'de kullanılabildiği için hizalama istediğim için Flexbox'ı da sıklıkla kullanırım. Bu çocuğu hizalayabilmem için bir alt öğeye sahip bir Flex konteynerim olabilir.

Flexbox'ın seçmem gereken düzen yöntemi olmadığına dair bir işaret, esnek öğelere yüzde genişlikleri eklemeye ve flex-grow 0'a ayarlamaya başladığımdadır. Esnek öğelere yüzde genişlikleri eklemenin nedeni genellikle, onları iki boyutta toplayın (şeyleri iki boyutta sıralamak tam olarak Grid'in amacıdır). Ancak, ikisini de deneyin ve hangisinin içeriğe veya tasarım modeline en uygun olduğunu görün. Bunu yaparak herhangi bir soruna neden olma olasılığınız düşüktür.

Yuvalama Izgarası ve Esnek Öğeler

Bu aynı zamanda çok fazla ortaya çıkıyor ve bir Izgara Öğesini aynı zamanda bir Izgara Kabı yapmakta ve böylece bir ızgarayı diğerinin içine yerleştirmede kesinlikle hiçbir sorun yok. Aynı şeyi Flexbox ile, Flex Item ve Flex Container yaparak yapabilirsiniz. Ayrıca bir Izgara Öğesi ve Esnek Konteyner veya bir Esnek Öğeyi bir Izgara Konteyneri yapabilirsiniz - bunların hiçbiri sorun değil!

Şu anda yapamadığımız şey, bir ızgarayı diğerinin içine yerleştirmek ve iç içe ızgaranın, genel üst öğede tanımlanan ızgara izlerini kullanmasını sağlamak. Bu çok faydalı olacaktır ve Grid Spesifikasyonunun 2. Seviyesindeki alt şebeke önerilerinin çözmeyi umduğu şeydir. Yuvalanmış bir ızgara şu anda yeni bir ızgara haline gelir, bu nedenle herhangi bir üst parçayla hizalandığından emin olmak için boyutlandırma konusunda dikkatli olmanız gerekir.

Bir Sayfada Birçok Izgaraya Sahip Olabilir

Ankette birkaç kez ortaya çıkan ve beni şaşırtan bir yorum, bir ızgaranın ana düzen ile sınırlandırılması gerektiği ve bir sayfadaki birçok ızgaranın belki de iyi bir şey olmadığı fikri var gibi görünüyor. İstediğiniz kadar ızgaraya sahip olabilirsiniz! Büyük şeyler ve küçük şeyler için ızgarayı kullanın, ızgara olarak ortaya konması mantıklıysa, Izgarayı kullanın.

Geri Dönmeler ve Eski Tarayıcıları Destekleme

@supports ile birlikte kullanılan ızgara, görmeyi bekleyebileceğimiz düzen varyasyonlarının sayısını daha iyi kontrol etmemizi sağladı. Ayrıca, en son teknolojiyi kullanmayanların içeriğe erişimini engellemeden modern tarayıcılara sahip olanları ödüllendirebileceğimiz anlamına gelen aşamalı geliştirme yaklaşımımızla gerçekten iyi çalıştı.

— Joe Lambert, enderloop.com'da çalışıyor

Ankette birçok kişi eski tarayıcılardan bahsetti, ancak eski tarayıcıları desteklemenin zor olduğunu düşünenler ile Özellik Sorguları ve Grid'in diğer yerleşim yöntemlerini geçersiz kıldığı gerçeği nedeniyle bunun kolay olduğunu düşünenler arasında oldukça eşit bir ayrım vardı. "CSS Izgarasını Kullanma: Izgarasız Tarayıcıları Destekleme" bölümünde bu geri dönüşleri yaratmanın mekaniği hakkında uzun uzun yazdım.

Genel olarak, modern tarayıcılar, önceki muadillerinden çok daha fazla birlikte çalışabilir. Çok daha az gerçek "tarayıcı hatası" görme eğilimindeyiz ve HTML ve CSS'yi doğru kullanırsanız, genellikle bir tarayıcıda gördüğünüzün diğerinde gördüğünüzle aynı olduğunu görürsünüz.

Elbette, bir tarayıcının belirli bir spesifikasyon veya bir spesifikasyonun bazı bölümleri için henüz destek göndermediği durumlarımız var. Grid ile, tarayıcıların Grid Layout'u çok kısa bir süre içinde çok eksiksiz ve birlikte çalışabilir bir şekilde göndermeleri konusunda çok şanslıyız. Bu nedenle, test etme konusundaki düşüncelerimiz, tarayıcıları Grid ile ve Grid olmadan test etmeye ihtiyaç duyma eğilimindedir. Ayrıca, IE10 ve IE11'de -ms ön ekli sürümünü kullanmayı seçmiş olabilirsiniz, bu da daha sonra üçüncü bir tarayıcı türü olarak test edilmesini gerektirir.

Modern Izgara Düzenini (IE sürümünü değil) destekleyen tarayıcılar da Özellik Sorgularını destekler. Bu, kullanmadan önce Grid desteğini test edebileceğiniz anlamına gelir.

Izgarayı Desteklemeyen Tarayıcıları Test Etme

Izgara Düzeni desteği olmayan tarayıcılar için yedekleri kullanırken (veya IE10 ve 11 için -ms önekli sürümünü kullanırken), bu tarayıcıların Izgara Düzenini nasıl oluşturduğunu test etmek isteyeceksiniz. Bunu yapmak için sitenizi örnek bir tarayıcıda görüntülemenin bir yoluna ihtiyacınız var.

Saçma bir şeyin desteğini kontrol ederek veya değer grid yanlış yazarak Özellik Sorgunuzu kırma yaklaşımını benimsemem. Bu yaklaşım, yalnızca stil sayfanız inanılmaz derecede basitse ve Izgara Düzeninizle ilgili her şeyi Özellik Sorguları içine yerleştirdiyseniz işe yarar. Bu, özellikle Grid'i yoğun bir şekilde kullanıyorsanız, çalışmanın çok kırılgan ve zaman alıcı bir yoludur. Ek olarak, eski bir tarayıcı sadece Grid Layout desteğinden yoksun olmakla kalmayacak, aynı zamanda desteklenmeyen başka CSS özellikleri de olacaktır. Eğer "en iyi uygulama" arıyorsanız, işinizi test etmek için iyi bir konumda olmak için kendinizi hazırlayın, orada yüksek!

Geri dönüşlerinizi test etmek için uygun bir yöntem belirlemenin birkaç basit yolu vardır. En kolay yöntem - oldukça hızlı bir internet bağlantınız varsa ve bir abonelik ücreti ödemeyi düşünmüyorsanız - BrowserStack gibi bir hizmet kullanmaktır. Bu, web sitelerinin (bilgisayarınızda geliştirilmekte olanlar bile) çok sayıda gerçek tarayıcıda görüntülenmesini sağlayan bir hizmettir. BrowserStack, açık kaynaklı projeler için ücretsiz hesaplar sunar.

Yerel olarak test etmek için önerim, hedef tarayıcınızın kurulu olduğu bir Sanal Makine kullanmak olacaktır. Microsoft, IE'nin IE8'e ve ayrıca Edge sürümlerine sahip ücretsiz Sanal Makine indirmeleri sunar. Ayrıca sanal makineye hiçbir Grid desteği olmayan bir tarayıcının daha eski bir sürümünü de yükleyebilirsiniz. Örneğin, Firefox 51 veya altının bir kopyasını alarak. Eski Firefox'unuzu kurduktan sonra, burada açıklandığı gibi otomatik güncellemeleri kapattığınızdan emin olun, aksi takdirde sessizce kendini güncelleyecektir!

Ardından sitenizi IE11'de ve desteklenmeyen Firefox'ta tek bir sanal makinede test edebilirsiniz (yazım hatalarından çok daha az hassas bir çözüm). Kurulumu yapmak yaklaşık bir saatinizi alabilir, ancak daha sonra geri dönüşlerinizi test etmek için gerçekten iyi bir yerde olacaksınız.

Eski Alışkanlıkları Unutmak

"Grid Layout'u ilk kez kullandım, bu yüzden öğrenilecek çok fazla kavram ve özelliklerin anlayabileceği çok şey vardı. Kavramsal olarak, yıllardır yaptığım şeyleri unutmak için en zor şeyi buldum, örneğin şamandıraları temizlemek ve her şeyi konteyner div'lerine paketlemek gibi."

— Hidde, hiddedevries.nl/tr üzerinde çalışıyor

Ankete yanıt veren kişilerin çoğu, eski alışkanlıkların unutulması gerektiğinden ve CSS'de tamamen yeni olan kişiler için Layout öğrenmenin nasıl daha kolay olacağından bahsetti. Katılmaya eğilimliyim. İnsanlara şahsen öğretirken, deneyimli geliştiriciler ızgarayı tek boyutlu bir yerleşim yöntemine döndürmek için çok uğraşırken, yeni başlayanlar Grid'i kullanırken çok az sorun yaşarlar. Float veya esnek tabanlı bir ızgara için gereken satır sarmalayıcılara geri ekleyen CSS Izgarası kullanan "ızgara sistemleri" denemeleri gördüm.

Yeni teknikleri denemekten korkmayın . Birkaç tarayıcıda test etme yeteneğiniz varsa ve olası erişilebilirlik sorunlarına dikkat ediyorsanız, gerçekten çok fazla yanlış gidemezsiniz. Ve belirli bir kalıp oluşturmanın harika bir yolunu bulursanız, bunu herkesin bilmesini sağlayın. Grid'i üretimde kullanmakta hepimiz yeniyiz, bu nedenle keşfedilecek ve paylaşılacak çok şey var.

“Grid Layout, medya sorgularından bu yana en heyecan verici CSS geliştirmesidir. Gerçek dünyadaki geliştirici ihtiyaçları için çok iyi düşünülmüş ve hem tasarımcılar hem de geliştiriciler için üretimde kullanmak mutlak bir zevk.”

— Mudford'un trysmudford.com üzerinde çalışmasını deniyor

Özetlemek gerekirse, işte mevcut en iyi uygulamaların çok kısa bir listesi! Kendi durumunuzda iyi olan veya olmayan şeyler keşfettiyseniz, bunları yorumlara ekleyin.

1. İçeriği yeniden sıralama olasılığının çok farkında olun. Görsel ekranın belge düzeniyle bağlantısını kesmediğinizi kontrol edin.
2. Yerel veya uzak bir Sanal Makine ile gerçek hedef tarayıcıları kullanarak test edin.
3. Eski yerleşim yöntemlerinin hala geçerli ve kullanışlı olduğunu unutmayın. Kalıpları elde etmek için farklı yollar deneyin. Grid'i kullanmak zorunda kalmaktan vazgeçmeyin.
4. Deneyimli bir ön uç geliştirici olarak, mizanpajın nasıl çalıştığına dair bir dizi önyargıya sahip olmanızın muhtemel olduğunu bilin. Bu yeni yöntemleri eski kalıplara döndürmeye zorlamak yerine yeniden bakmaya çalışın.
5. Bir şeyler denemeye devam et. Hepimiz bu konuda yeniyiz. Çalışmanızı test edin ve keşfettiklerinizi paylaşın.