24 Adımda CSS Bilgilerinizi Önemli Şekilde Geliştirmek için 5 Adım
Bir süredir kodlama yapıyorsunuz ve bir CSS dosyasında yolunuzu biliyorsunuz. Kesinlikle usta değilsin, ama yeterince uğraşarak gitmek istediğin yere ulaşabilirsin. Yine de, CSS'nin böyle bir mücadele olduğu noktayı geçip geçmeyeceğinizi merak ediyorsunuz. Neyin işe yarayıp neyin yaramadığını görmek için nihayetinde deneme yanılma başvurusu yapmadan karmaşık bir yerleşim düzenleyebilecek misiniz?
İyi haber şu ki, bir web sitesini kodlamak için yeterli CSS'yi bildiğiniz bu sinir bozucu noktayı geçebilirsiniz, ancak tam olarak nereye gideceğinizi tam olarak anlamadığınızdan rahatsızlık vermeden kod yazmanıza izin veren sağlam bir temelden yoksundur. ve bu nokta düşündüğünüzden çok daha yakın. CSS anlayışınızı önemli ölçüde artıracak beş konu olmasını öneriyorum. Önümüzdeki yirmi dört saat boyunca her birini okumak için biraz zaman harcayın ve sonsuza kadar kodlama şeklinizi değiştireceksiniz.
Envato Elements'i keşfedin
1. Fikrinizi Konumlandırma Bağlamlarına Sarın
HTML öğelerini gitmelerini istediğiniz yere taşımak için CSS'yi nasıl kullanacağınızı gerçekten anlamak istiyorsanız, konumlandırma bağlamlarını kesinlikle kavramanız gerekir. Ve sadece sıradan bir anlayış demek değil, farklılıkları, davranışları, tuhaflıkları vb.
Aslında anlamanız gereken beş pozisyon değeri vardır. Eğer beşine de bakmadan isim veremezseniz, bu eğitim için kesinlikle birinci sınıf adaysınız demektir. İşte bunlar: statik, sabit, göreli, mutlak ve miras.
Beşinin tümünü bilmeniz ve anlamanız gerekiyor, ancak kodlama şeklinizi gerçekten değiştirecek olan büyük ikisi mutlak ve göreli konumlandırmadır. Bu iki konumlandırma bağlamını ayrı ayrı kullanmayı öğrenmek ve daha sonra birlikte nasıl çalıştıklarına atlamak, CSS mizanpajını görüntüleme şeklinizi temelden değiştirecektir. Bu, işinizi son derece kolaylaştıracak bir vahiy.
Sizi Oraya Ulaştıracak Kaynaklar
Mutlak ve Göreli Konumlamadaki Düşüş
Bu, konumlandırma bağlamı konusundaki derin dalışım. Beşinden de kısaca bahsedip açıklarım ama gerçekten büyük ikisine odaklanıyorum: nasıl farklılıklar, nasıl farklı oldukları ve birlikte nasıl çalıştıkları. Bu parçayı okuyun ve baş ağrısız CSS konumlandırma yolunda ilerleyeceksiniz.
CSS Konumlandırma 101
Bu parça saygıdeğer A List Apart blogundan geliyor, bu yüzden hemen hem kapsamlı hem de inanılmaz derecede eğitici olacağını biliyorsunuz. Makale 2010 yılında yayınlandı, ancak bilgi hala mükemmel bir şekilde alakalı ve beş konumlandırma bağlamının tümüne büyük bir giriş niteliğindedir. Çok görsel bir makale değil, ancak her konsepte kolaylık sağlamak için birçok basit kod örneği var.
On Adımda CSS Konumlandırmayı Öğrenin
Bu, çeşitli konumlandırma bağlamlarına fevkalade kısa bir bakış niteliğindedir. Uzun soluklu bir makale yerine, bu sayfada on sekmeli küçük bir kutu sunulmaktadır. Her sekmede küçük bir kod snippet'i ve kodu açıklayan bir veya iki cümle bulunur. Sağda kapalı, her sekmeyle güncellenen canlı bir örnek düzendir. Bu biçim, kod snippet'lerini ürettikleri düzenlere görsel olarak bağlamak için harika ve ALA'dan yukarıdaki gibi çoğunlukla metin açıklamalarıyla mücadele ediyorsanız bir görünüm vermenizi şiddetle tavsiye ederim.
2. Usta Şamandıralar
CSS'yi ilk öğrendiğinizde, şamandıralar akla gelebilecek en berbat düzen sistemlerinden biri gibi görünüyor. Onları temel düzeyde kullanmayı öğrendikten sonra, sadece yüzen çocukları içeren ebeveynlerin nasıl daraltılmış bir yüksekliğe sahip oldukları hakkında her şeyi öğrenmelisiniz, bu da sorunu düzeltmeler ve taşma manipülasyonları ile çözmek için kırk yedi farklı yolla sonuçlanır.
Neyse ki, uzun vadede, şamandıraların arkasındaki kavramlara alışırsınız ve kullanımı o kadar kolay olabilir ki, onlara çok fazla düşünce vermezsiniz. Sizinle bu hedef arasında duran tek şey, şamandıra davranışını ve tekniklerini baştan aşağı gerçekten açıklayan ve derinlemesine açıklayan sağlam bir makale.
Sizi Oraya Ulaştıracak Kaynaklar
CSS Floats Hakkında Bilmediğiniz Her Şey
Bu makalede, CSS'deki yüzdürmelerle ilgili konuların neredeyse tamamını kapsıyorum. Şamandıraların ne olduğu ve nasıl çalıştıkları hakkında temel bir tartışma ile başlar. Bundan sonra şamandıraların ilgili elemanların kutularını nasıl etkilediğinden, şamandıraların farklı yükseklikteki elemanlarla nasıl garipleştiğinden, şamandıra davranışını kapsayan dokuz kuraldan ve elbette çöken yükseklik çöküşünden ve nasıl düzeltileceğinden bahsediyorum.
Şamandıralar Hakkında Her Şey
CSS ile ilgili konularda Chris Coyier her zaman en sevdiğim yazar oldu ve şamandıralara girmesi hayal kırıklığına uğratmıyor. Şamandıralarla nasıl çalışılacağı hakkında kısa ama anlaşılır bir tartışma arıyorsanız, bu parça sizi kapsamaktadır. Özellikle makale boyunca kullanılan basit, çekici çizimleri seviyorum.
CSS Float Özelliğinin Gizemi
Chris Coyier'in eserleri genellikle kısa ve öz olsa da, Smashing Magazine'deki içerik genellikle tonlarca örnek ve ilgili tartışma ile oldukça geniştir. Bu makale, yüzen kavramını tanıtır, bunları nasıl kullanacağınızı ve temizleyeceğinizi anlatır ve daha sonra gerçek dünya sitelerinde genellikle yüzenlerin nerede görüldüğünü tartışır. Teorinin canlandığını görmeniz gerekiyorsa, bu tam size göre.
3. Seçicilerinizi Tanıyın
İyi temiz CSS yazmanın anahtarlarından biri, hangi CSS seçicilerinin kullanabileceğinizi, nasıl çalıştıklarını ve çeşitli tarayıcılarda desteklenme derecelerini güçlü bir şekilde kavramaktır. Yeterince basit bir konu gibi geliyor, ancak gerçekte CSS seçici dünyası oldukça karmaşık.
Nitelik değeri seçicileri kullanmaktan ve sınıf adlarında anahtar kelimeleri hedeflemekten, evrensel seçicinin kodunuzun hatalarını ayıklamak için nasıl yardımcı olabileceğine kadar burada öğrenilecek bir dizi farklı ilginç şey var. Bir grup süslü seçiciyi anlamadan kişisel olarak alabileceğinizi düşünseniz bile, gerçek şu ki, diğer kodlayıcılar her gün bu şeyleri kullanıyor ve görünüm kaynağına çarptığınızda ne gördüğünüzü anlamanız gerekiyor!
Sizi Oraya Ulaştıracak Kaynaklar
CSS Seçicileri: Sadece Zor Bitler
Bu, öncelikle CSS seçicilerinin daha karmaşık yönlerine bakan eğlenceli bir makaledir. Zemin seviyesindeki şeyleri atlıyorum ve doğrudan DOM kavramının CSS ile belgenizin çeşitli yönlerini hedeflemeye nasıl dönüştüğünü tartışmaya geçiyorum. Çocukları ve kardeşleri seçmek, seçicileri nasıl zincirleyeceğiniz ve çok daha fazlası hakkında her şeyi öğreneceksiniz.
Ezberlemeniz Gereken 30 CSS Seçici
Jeffrey Way bir web geliştirici rockstar ve bunun gibi makaleler nedenini kanıtlıyor. Bu Nettuts + makalesi, tarayıcı desteğine büyük önem veren basit ve kısa bir biçimde çok çeşitli CSS seçicileri kapsar. Şaşırtıcı bir şekilde, Jeff otuz seçicinin her biri için canlı örnek sayfalar bile kodladı.
CSS Özellik Seçicileri: Nasıl ve Neden Kullanmalısınız?
Özellik değeri seçicileri, CSS seçicilerinin en güçlü alt kümelerinden biridir ve CSS3 bu gücü gerçekten artırır. Seçicilerinizin küçük bir özellik değeri büyüsüyle ne kadar çok yönlü olabileceğine inanamayacaksınız. Bu makaleyi okuduktan sonra, bir profesyonel gibi “keyfi alt dize nitelik değeri seçici” gibi ifadelerin etrafından dolanacaksınız.
4. KURU Kodlama Kavramlarını Öğrenir
“Kendini Tekrar Etme.” Bu basit cümlenin kodlama söz konusu olduğunda ciddi sonuçları vardır. DRY kodlama uygulamalarına gerçekten daldığınızda, sonuç daha temiz kod, daha az iş ve harika olduğu kadar güçlendirici güzel yeni bir iş akışıdır.
Yukarıdaki oldukça dar olan diğer konuların aksine, bu, her türlü farklı uygulama, teknik ve düşünceyi kapsayan oldukça geniş bir konudur. İlginçtir ki, yakın zamanda aklıma DRY kodlama uygulamalarına odaklanan şeylerden biri CSS ön işlemcilerinin kullanılmasıdır.
Birçoğu önişlemcilerin kötü kodlama uygulamalarına yol açtığını iddia etse de, gerçek tam tersidir. Önişlemcilerin kendileri manuel tekrardan kaçınmaya yardımcı olur, ancak bunun ötesine geçer. Daha az ve SASS gibi araçların çıktılarını ve genel olarak diller için hedefleri incelemek aslında daha iyi saf CSS yazmamı sağladı! Sass'ta @extend gibi kavramlara hakim olduktan sonra, sadece CSS ile kod yazarken bunun etkilerini düşünemezsiniz.
Sizi Oraya Götürecek Kaynaklar
KURU CSS: CSS'nizi Tekrar Etmeyin
Bu makalede, Steven Bradley sizi DRY CSS konusuna tanıtır ve bazı temel ilke ve hedeflerini kapsar. Uygulamayı üç basit fikre kadar kaynar ve bu fikirleri gerçek bir iş akışında nasıl uygulayacağınızı gösterir. Kavramlar büyük ölçüde aynı konuyu kapsayan bir Jeremy Clarke sunumundan ödünç alınmıştır.
Nesneye Yönelik CSS'ye (OOCSS) Giriş
Daha önce de belirttiğim gibi, KURU CSS hareketinin doğasında var olan fikirler oldukça geniş kapsamlı ve doğrudan diğer yapılardaki kavramlarla ilgili. OOCS, üstün organizasyon ve daha az tekrar ile daha hızlı, daha verimli stil sayfaları oluşturmanıza yardımcı olmayı amaçlayan, giderek daha popüler bir metodolojidir. OOCS'de iki temel ilke vardır: yapının deriden ayrılması ve kapların ve içeriğin ayrılması. Smashing Magazine'in bu makalesi, temel fikirlerde size yol gösterecek ve bunları kendi çalışmalarınıza uygulamanıza yardımcı olacaktır.
CSS Yazmak için SMACSS Kılavuzlarına Giriş
DRY CSS hakkındaki ilk makaleden Steven Bradley'i hatırlıyor musunuz? Ayrıca, OOCS: SMACSS'ye (Jonathan Snook'tan bir proje) benzeyen ancak OOCS'den ayrı bir projeyi açıklayan bu parçayı yazdı. OOCSS'de olduğu gibi, SMACSS'in iki ana hedefi vardır. Birincisi, HTML ve içeriğin bir bölümünün semantik değerini artırmak, ikincisi ise belirli bir HTML yapısının beklentisini azaltmaktır. Bu makalede, her iki hedef de ayrıntılı olarak açıklanmakta ve SMACSS'in nasıl çalıştığını görebilmeniz için yardımcı kod örnekleri sunulmaktadır.
5. Tarayıcı Desteğinizi Tanıyın
CSS'nizi geliştirmenin beşinci ve son anahtarı, neyin nerede çalıştığını bilmektir. CSS3, çoğumuzun görmezden gelemeyeceği kadar caziptir, ancak zor gerçek, bir demetinin belirli tarayıcılarda çalışmadığıdır (“belirli tarayıcılar” ile elbette IE anlamına gelir).
Acemi web geliştiricilerinin kafalarına girmeleri gereken büyük sır, her bir CSS özelliğini ve insan tarafından bilinen her tarayıcının nasıl işlediğini ezberlemeleri gerektiği değil, bunun yerine size bu bilgileri veren kesinlikle inanılmaz kaynaklar olduğu özgürce, sadece nereye bakacağını bilmelisin.
Sizi Oraya Götürecek Kaynaklar
CSS3 ve HTML5'te Çivileme Tarayıcı Desteği: Bugün Kullanılacak Çok Değerli Kaynaklar
Bu makalede, tarayıcı desteğini kontrol etmek için yer işareti koyduğum nispeten az sayıda siteyi tanıtacağım. Bu kaynaklar harika, görseldir ve kodlamaya geri dönebilmeniz için ihtiyacınız olan bilgileri bir anda verir. Ne olduklarını görmek için bir göz atın!
CSS3 için Tarayıcı Desteği: Mevcut Durum Nedir?
Bu makale bir yıl önce yazılmıştır, bu nedenle “mevcut durum” parçası tartışmaya açıktır, ancak bu süre zarfında bu makaledeki bilgileri geçersiz kılmak için yeterli değildir. Her yerde neyin işe yaradığına ve nelere dikkat etmeniz gerektiğine bağlı olarak bölümlere ayrılmış çeşitli CSS3 özelliklerine inanılmaz yardımcı bir genel bakış sunar. Sadece birkaç dakikanızı alacak ve okumaya değer.
Çapraz Tarayıcı Uyumluluğunun Önemi: İpuçları ve Kaynaklar
CSS'de gerçekten yeniyseniz ve tarayıcı uyumluluğu konusuna ve bunun neden önemli olduğuna ilişkin temel bir girişe ihtiyacınız varsa, bu Noupe makalesi sizi kapsamaktadır. Size sadece uyumluluk fikrini satmanın ötesinde, maksimum uyumluluk sağlamak için kullanabileceğiniz bir dizi harika kaynak listeler. Özellikle ilgi çekici olan, sitenizi çeşitli tarayıcılarda test etmenize yardımcı olacak araçların listesidir.
Bunları 24 Saat İçinde Okumam Gerekiyor mu?
Size üzerinde çalışmanız gereken beş kritik konu ve bilmeniz gereken ilkeleri öğrenebileceğiniz en az on beş makale sundum. Her şey yolunda ve güzel ama başlığımda tek bir günde daha iyi olacağınıza söz verdim ve herkesin oturup on beş uzun makale okuma zamanı yok!
İyi haber şu ki, size her konuda üç makale verdim, böylece aralarından seçim yapabileceğiniz bir çeşitlilik var. İhtiyaçlarınıza en uygun olanı seçebilmeniz için her birinin içeriğini ayrıntılı olarak açıkladım. Bildiklerinize değil, bilmediklerinize dayanarak okunacak makaleleri seçmeyi unutmayın. Bilginizdeki boşlukları doldurmayı bir hedef haline getirin.
Benim önerim yukarıdaki içeriğe göz atmak ve okumak için beş makale seçmek (her bölümden bir tane). Bir günde üstlenecek çok şey olsa da, çoğu bin kelimeden fazla değil, birçoğu daha az. Bunu çıkarabileceğinden eminim. Eğer yapamazsan, sorun değil. Bir hafta içinde CSS becerilerinizi geliştirme hedefinizi değiştirin ve önümüzdeki beş gün boyunca her gün seçtiğiniz beş makaleden birini okuyun. Önümüzdeki hafta net, özlü, uyumlu ve tekrar kullanılabilir CSS yazma konusunda çok daha iyi olacağınızı garanti ediyorum.
Başka Hangi Kavramları Önerirsiniz?
Artık insanların CSS becerilerini geliştirmek için üzerinde durmaları gereken ilk beş konuyu okuduğunuza göre, sizden duymak istiyorum. Sizce CSS kodlayıcıları genellikle hangi sorunlarla mücadele ediyor ve daha fazla bilgi edinmek isteyen herkes için hangi kaynakları öneriyorsunuz?
Stok fotoğraf BigStock'ın izniyle sağlanmıştır
