Daha önce Zen Kodlama olarak bilinen Emmet, HTML veya CSS'yi kodlarken verimliliğinizi artırmak için gereken en iyi araçlardan biridir. Kod tamamlama gibi çalışır, ancak daha güçlü ve şaşırtıcıdır. HTML / CSS'nizi basit bir formdan karmaşık olana kadar otomatik hale getirebilir.
Emmet, metin editörü veya Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, Parantez, Notepad ++, PHPStorm ve daha fazlası gibi IDE (Integrated Development Environment) için iyi destek sunar. Ayrıca JSFiddle, JSBin, CodePen, IceCoder ve Codio gibi çevrimiçi düzenleme araçlarını da destekliyor.
Emmet'in çalışma şekli, sözdizimi yazarken sekme klavye tuşunu yazmaktır. Aşağıdakiler, kullanabileceğiniz en yaygın Emmet sembolleridir. Bunları çalışırken görmek için lütfen okumaya devam edin.
Emmet - HTML En İyi Püf Noktaları
Benim yaptığım gibi Emmet ile HTML yazarken şaşıracaksınız. Daha önce de belirtildiği gibi, Emmet basit bir HTML'yi çok karmaşık olana kısaltabilir. Ve sadece tek bir kod satırına yazılırlar. Varsayılan olarak, bilinmeyen etiket adını kısaltırsanız, Emmet yazdığınız etiketi otomatik olarak yazacaktır. Kolayca anlamak için aşağıdaki canlandırmaya bakın.
1. Yuvalama
Bazı öğeleri yerleştirmek için, sadece kullanmak istediğiniz her etiketten sonra daha büyük işaret eklemeniz gerekir. Örneğin, içinde nav, div, ul ve li olan bir header olmasını istediğimde sadece header>nav>div>ul>li ve isabet sekmesi tuşunu yazmam gerekir.
2. Kardeş
Öğelerinizi yerleştirmek istemiyorsanız, eklemek istediğiniz etiketleri izleyen bir artı + işareti kullanabilirsiniz. Örneğin, header+section+article+footer, header, section, article ve footer için farklı bir yer verecektir.
3. tırmanmaya
Bir alt öğenin içindeyken ve o çocuğun dışında başka bir öğeye sahip olmak istediğinizde, bir öğeyi ^ işareti ile kolayca tırmanabilirsiniz. İki kez yazarsanız, çift eleman vb. Örneğin, header>div>h1>nav yazarsanız, nav öğesini hala h1 içinde bulabilirsiniz. Çıkarmak için, son > işaretini ^ ile değiştirin.
4. Sınıf ekle
Emmet ayrıca tercih ettiğiniz sınıf adını etiketin içine ekleyebilir. Kullanacağınız işaret, nokta olan CSS'deki sınıf seçiciyle aynıdır . işaret. Örneğin, .title sınıfı ile bir div, h1 .title ve nav ile .fixed, div.container>header>h1.title+nav.fixed .
İçinde birden fazla sınıf olması istiyorsanız, ek sınıfınızı nokta ile birlikte birinci sınıftan sonra yazın . işaret. Örnek: div.container.center üretecek .
5. Kimlik ekle
Sınıfın yanı sıra, # işaretiyle etiketinize bir kimlik ekleyebilirsiniz. Kullanım, sınıf ekleme ile aynıdır ancak içine çift kimliği yazamazsınız. Bunu yapmayı denerseniz, Emmet yalnızca girdiğiniz son kimliği okur.
6. Metin ekle
Emmet sadece bazı etiketleri kısaltmak kadar basit değildir, hatta içine metin satırı ekleyebilirsiniz. Bazı metin eklemek için, metni yalnızca {} işaretli ayraçla sarmanız gerekir. Metin otomatik olarak etiketin içine ekleneceğinden daha büyük bir > işareti eklemeniz gerekmez.
7. Öznitelik Ekleyin
Sınıf ve kimliğin dışında başka bir özellik eklemek istiyorsanız, sadece [] işareti içine eklemek istediğiniz özelliği yerleştirin. Örneğin, logo alt ile logo.png kaynağı olan bir resme sahip olmak istiyorum, bu yüzden sadece img[src="logo.png"] .
8. Gruplandırma
İçinde çoklu iç içe geçmiş bir öğeye sahip olmak istediğinizde, onları () işaretiyle gruplamak, bunu kolayca elde etmenize yardımcı olur. Örneğin, h1 ve nav içinde başlık ve başlık dışında başka bir bölüm içeren bir kabın olmasını istiyorum. Basitçe şunu yazacağım: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Çarpma
Bu özellik Emmet'in favorilerinden biri olabilir. Çarpma işleminde olduğu gibi, herhangi bir öğeyi istediğimiz kadar çarpabiliriz. Kullanmak için basitçe bir yıldız * işareti ekleyin, elemanla çarpmak ve elemanın numarasını ekleyin. Örneğin, ul içine beş li madde yazmak istiyorum, sonra doğru sözdizimi ul>li*5 .
10. Otomatik Numaralandırma
Otomatik numaralandırma, artan numaralarla kolayca farklı adlar yazmanıza yardımcı olur. Bu özellik için doğru sözdizimi bir dolar $ işaretidir. Otomatik numaralandırma en çok çarpma ile kullanılır. Örneğin, önceki li item5, item5 bir sınıfla eklemek istiyorum. Bu yüzden, sadece dolar işareti olan ek bir sınıf adı eklemeliyim: ul>li.item$*5 .
11. Lorem
Eğer lipum.com gibi lipsum jeneratörü açarak bazı sahte metinler yazarsanız, Emmet ile artık yapmanız gerekmez. Emmet ayrıca sahte metin oluşturucuyu lorem veya lipsum sözdizimi ile destekler. Metninizin ne kadar süreceğini de belirleyebilirsiniz. Mesela 10 kelimelik bir metin almak istiyorum, sonra lorem10 .
12. Otomatik Belge
Yeni bir projeye başlarken, html yapısını elle yazmak veya yapıştırmayı diğer kaynaklardan kopyalamak yerine Emmet sizin için daha iyi yapabilir. Yapmanız gereken tek şey bir ünlem yazıyor ! işareti, sekme vurmak ve sihir gerçekleşir. HTML4 kullanmak istiyorsanız, bunun yerine bir HTML4 kullanmak istiyorsanız, html:4t yazmanız yeterli olacaktır.
13. Bağlantı
Belgenize eklemek istediğiniz favicon, rss veya harici bir CSS dosyanız varsa, bunları daha hızlı yazmak için bağlantı ipuçlarını kullanabilirsiniz. Bir favicon eklemek için link:favicon yazın, sonra içinde varsayılan favicon.ico dosya adı olan bir favicon bağlantısı oluşturacaktır. Ve css için link:css, içinde varsayılan style.css stil adına sahip bir CSS linki oluşturur. Ve RSS varsayılan ad olarak rss.xml olacaktır.
Daha hızlı bir kaynak oluşturmak için bunları artı + işaretiyle birleştirebilirsiniz.
14. Çapa
Varsayılan olarak, a etiket yazıp sekmeye bastığınızda, içinde href niteliğine sahip a etiket alırsınız. Ancak, örneğin a:link için link ile birleştirirseniz bir // değeri ekleyebilirsiniz. Ve bunun yerine bir posta bağlantınız olmasını istiyorsanız, o zaman a:mail kullanın.
15. Akıllı Atlama
Size vereceğim son HTML püf noktaları akıllı atlama özelliğidir. Temel olarak, içinde sınıf veya kimliğe sahip olmak istediğinizde etiket adını yazamazsınız. Bu sadece bazı durumlar için geçerlidir.
Öncelikle, içinde ID veya sınıf bulunan bir div sahibi olmak istiyorsanız, etiket adını yazmanız gerekmez, sadece ismiyle birlikte doğrudan ID veya sınıf sembolünü yazın.
İkincisi, bir ul etiketinin içindeyken, bir sınıf veya kimliği varsa, li etiketini yazmayı atlarsınız.
Ve son table etiketi içinde uygulanır. Sınıf veya kimlikleri varsa, tr ve td etiketlerini yazmayı atlayabilirsiniz ve Emmet sizin için otomatik olarak ekler.
Emmet - En İyi CSS Püf Noktaları
Bazı HTML numaralarını öğrendikten sonra, şimdi CSS zamanı. Üst resimde gösterilen genel sembollerden bazıları CSS ile çalışmayacaktır. Onlar daha büyük > ve tırmanmaya ^ semboller. Bunları kullanırsanız, tıpkı artı + simgesi gibi üretecektir. Öyleyse gidelim.
1. Genişlik ve Yükseklik
Emmet ile width ve height tanımlama çok kolaydır. Sadece ilk kelimesini ve ardından eklemek istediğiniz büyüklüğü yazmanız yeterlidir. Varsayılan olarak, birimler belirtmezseniz, Emmet onları px birimiyle oluşturur. Mevcut birim sembolü % ve em .
2. Metin
Kullanımı kolay bir metin özelliği sembolü vardır ve varsayılan değerde üretilecektir. ta, left değere sahip text-align üretecek, td, none değeri olmayan text-decoration ve tt, uppercase ile text-transform olacaktır.
3. Arkaplan
Arka plan eklemek için, sadece bg kısaltmasını kullanın. background-image elde etmek için bgc, background-color için bgr ve background-repeat için bgr ile bgr . Ayrıca arka plan özelliklerinin tam listesini almak için bg+ yazabilirsiniz.
4. Yazı Tipi Yüz
Artı işareti yalnızca arka plan için geçerli değildir. @font-face için @font-face özelliğinin tam bir listesi için @f+ yazabilirsiniz. Artı işareti olmadan @f, o zaman sadece basic @font-face alırsınız.
5. Çeşitli
Diğer harika püf noktaları, yazı animation anim metinle kısaltmanızdır. Bir eksi - işareti eklerseniz, tam özellikli bir animasyon özelliği elde edersiniz. Ayrıca @kf tam listesini üretecek @kf metni de var.
Sonuç
Emmet, geliştirme sürecinizi kolaylaştırmak için çok zaman kazandıran bir araçtır. Eğer sadece Emmet'i biliyorsanız, şimdi denemek için çok geç değil. Bu numaralar Emmet'in özelliklerinden sadece birkaçı. Emmet'te, özellikle CSS için, tonlarca başka sembol ve sözdizimi vardır. Okumalarınızı daha da ileri götürmek için Emmet docs veya hile sayfasına gidin.
