Temel HTML, CSS ve JavaScript teknikleri

Yazar: Monica Porter

Yaratılış Tarihi: 22 Mart 2021

Güncelleme Tarihi: 17 Mayıs Ayı 2024

İçerik

Yerleşim
Clearfix
Kutu boyutlandırma
Çoklu sütunlar
Hesaplamalar
Tarz
Şeffaflık
Filtreler
Görüntü değiştirme
Duyarlı video
İşlevsellik
Öğeleri kolayca seçme
Yeni diziler oluşturma
Belge ve pencere nesnelerini temizleyin
Bunu beğendin mi? Bunları oku!

Bu makale ilk olarak web tasarımcıları ve geliştiricileri için dünyanın en çok satan dergisi olan .net dergisinin 234. sayısında yayınlandı.

Özünde bir teknik, bir görevi yerine getirmenin bir yoludur ve ön uç geliştiriciler ve tasarımcılar olarak birçok görevimiz vardır. Bununla birlikte, bu manzaranın ne kadar değiştiğini sık sık unutuyoruz. 2002'den 2010'a kadar topluluğumuz kod ve kaynak şişkinliği yüzünden çürüdü, performansı ve sürdürülebilirliği engelledi. Bunun üstesinden gelmek için, "teknik" olarak adlandırdığımız bir dizi ipucu, püf noktası ve hile oluşturduk. Hâlâ görevleri yerine getiriyorduk, ama en verimli şekilde değil.

Bir 360 yapmak, son birkaç yılda daha iyi standartlar ve standart uygulamalarının hayata geçtiğini görerek, bir topluluk olarak daha yeni ve daha gelişmiş 'teknikler' geliştirmemizi sağladı. Bu yeni manzara, "modern web" olarak kabul edilen şeydir.

"Web 2.0" durgun ve kafa karıştırıcı hale geldikçe, "modern web" de değişecektir. Zaman verin. Bununla birlikte, şimdilik, neyi temsil ettiğine dair ortak bir anlayış olduğu sürece terimi kullanabilir ve kötüye kullanabiliriz.

2010 yılında yepyeni, yarı standart bir web ortamı sağlayan HTML5 spesifikasyonu geldi. Opera, Firefox, Chrome ve Safari gibi tarayıcılar bu yeni dalgayı benimsedi ve geliştirici ekiplerini yeni standart uygulamaları ve API keşfi sınırlarına itti. Size bu tarayıcıların nasıl "yerleşik" olduklarına dair bir fikir vermek için, www.html5readiness.com'un değişen HTML5 desteğiyle ilgili görselleştirmelerine bakın.

Internet Explorer'da destek eksikliği konusunda endişelenmeyin. Google Chrome Frame sayesinde bununla mücadele edebiliriz. Google, 2010 yılında piyasaya sürdüğünden beri, Internet Explorer için temel destek mekanizması haline geldi. IE'nin tüm sürümleri, yeni bir kullanıcıdan, IE içinde hafif bir Chrome sürümü olan tercihli web sitelerini oluşturan bir eklenti indirmesini isteyen Chrome Frame ile hedeflenebilir. Chrome Frame'i uygulamak için sitemizin head> etiketine aşağıdaki meta> etiketi ekliyoruz.

meta http-equiv = "X-UA-Uyumlu" content = "chrome = 1" />

Buradan, IE kullanıcılarından, henüz kurulmamışsa, JavaScript kullanarak eklentiyi indirmelerini isteyebiliriz:

script type = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / script>
komut dosyası>
window.onload = function () {
CFInstall.check ({
mod: "kaplama",
hedef: "http://www.alaniniz.com"
});
};
/ script>

eklenti yüklendikten sonra kullanıcıyı belirli bir bağlantıya göndermek için hedef ayarlanabilir. Bir uyarı: Chrome Frame bize tam anlamıyla modern tarayıcılar için geliştirmemiz için bir yöntem sağlasa da, kullanıcının istemediği takdirde eklentiyi indirmeme seçeneğine sahip olduğunu unutmamalıyız. Aksi takdirde ve IE'nin bir veya diğer farklı sürümleri için destek sağlamanız gerekiyorsa, deneyimlerinizle tarayıcılar arası neleri sağlayıp sağlayamayacağınızı öğrenmek için biraz daha zaman harcamanız gerekecektir..

Modern web yığınında geliştirilebilecek önemli ölçüde daha eşit bir oyun alanı sağlayan bu kodla, zihnimizle rahatlıkla ilerleyebiliriz. Sitenizi doğru tarayıcılar arası yapılandırmak için bir dizi tarayıcıya özgü hack oluşturmanız gerektiğini, dilimlenmiş resimlerinizle kullanılacak sayısız sayıda boş öğe oluşturmanız ve hatta aşırı ayrıntılı veya gereksiz JavaScript kodu yazmanız gerektiğini hatırlayabilirsiniz. çalışmak için en basit işlevsellik. Bütün bu acılar, bir anlamda, bugün endişelendiğimiz sorunların aynısıdır. Hâlâ düzen, stil ve işlevsellikle mücadele etmek için daha fazla kontrol ve daha iyi araçlar için savaşıyoruz, ancak olgunlaşmış bir seviyede.

Yerleşim

Clearfix

Bir elementi yüzdürme, CSS 2.1'de tanıtıldı, ancak hiçbir zaman umduğumuz tam çözüm olmadı. En büyük sorunlardan biri, bir alt öğe yüzdürüldüğünde bir ana öğenin boyutlarını korumaktı. Bunu ele almak için, clearfix tekniği oluşturuldu.

Aşağıdaki HTML'yi alın:

div>
div> ... / div>
div> ... / div>
/ div>

Bu teknik Nicolas Gallagher tarafından yazılmıştır:

.clearfix: önce,
.clearfix: sonra {
içerik: "";
ekran: tablo;
}
.clearfix: sonra {
ikisini de temizle;
}
.clearfix {
* yakınlaştırma: 1;
}

Projelerinizi başlatmak için HTML5Boilerplate kullanıyorsanız, clearfix tekniğinin bu sürümüne zaten sahip olacaksınız.

Kutu boyutlandırma

Yıllar boyunca geliştiriciler hangi kutu modeli uygulamasının daha mantıklı olduğunu tartıştılar. Tuhaflıklar ve Standartlar modu gerçekten şu anlama geliyordu: "Bir öğenin boyutları ayarlandıktan sonra, kenarlıklar ve dolgu uygulandığında değişmeli mi yoksa uygulanmamalı mı?".

Artık, sınırların ve dolgunun bir öğe içindeki mevcut alandan uzaklaşmasının ve öğenin genişliğini veya yüksekliğini artırmamasının daha mantıklı olduğu konusunda genel bir fikir birliğine varılmıştır. Tartışma, kutu boyutlandırmanın yaygın şekilde uygulanmasıyla ilgisiz hale getirildi. Tarayıcı ipuçlarını sizden tersi yerine sizden alacak.

Chris Coyier ve Paul Irish tarafından popüler hale getirilen, her şeyi kapsayan bir teknik aşağıdakilerle uygulanabilir:

* {
-webkit-box-boyutlandırma: border-box;
-moz-kutu-boyutlandırma: kenarlık-kutu;
kutu boyutlandırma: border-box;
}

CSS'de * seçicinin kullanılması, potansiyel performans isabetleri nedeniyle tartışılmıştır. Web sitenizin / uygulamanızın diğer tüm yönlerini hiper-optimize etmiyorsanız, bu tür iddialar anlamsızdır. Border-box'ı kullanmak, tarayıcının mevcut alan setinin içine dolgu ve kenarlıklar eklemesini sağlayacaktır. "Standartlar Modu", kutu boyutlandırma içerik kutusu olarak ayarlanarak kullanılabilir.

Çoklu sütunlar

Web, yazılı form ve türden büyük ölçüde ilham aldı. Maalesef parşömen aşamasında sıkışıp kaldık. Bu sorunlardan bazıları, uzun zamandır beklenen Paged-Media ve CSS Bölgeleri spesifikasyonlarıyla gündeme geliyor. Bununla birlikte, daha dergi benzeri düzenlere doğru ilk adımlar, tarayıcılar CSS çoklu sütunları uygulamaya başladığında atıldı. Bu etkiyi yaratacak kod oldukça basittir:

p {
-webkit-sütun sayısı: 2;
-moz-sütun sayısı: 2;
sütun sayısı: 2;
}

A List Apart'ın blogundan, CSS3 çok sütunlu spesifikasyonunun yanı sıra, destek olmadan herhangi bir tarayıcı için kullanabileceğiniz bir JavaScript yedeği hakkında daha fazla bilgi edinebilirsiniz.

Hesaplamalar

Boyutları hesaplamak zor olabilir. Eski günlerde, bırakın karışık birim hesaplamaları bir yana, herhangi bir birim hesaplaması yapmanın hiçbir yolu yoktu. Calc sayesinde hepsi değişti. Başlangıç öğelerinin genişliğini etkilemeyen veya kutu boyutlandırma gibi bir şey kullanmayan dolgulu bir efekt yaratmak: border-box; yakın zamana kadar, yalnızca fazladan içeren öğeler eklenerek mümkündü.

.padded {
kenar boşluğu: 0 otomatik;
konum: göreceli;
genişlik: -webkit-calc (% 100 - (20px * 2));
genişlik: -moz-calc (% 100 - (20px * 2));
genişlik: hesap (% 100 - (20px * 2));
}

calc (), .padded öğesinin ebeveyn genişliğine ve eksi 20px'lik dolgusuna dayalı olarak uygun genişlik hesaplamasını gerçekleştirir. Bunu, öğemin her iki tarafı için 2 ile çarptım, göreceli konumlandırma ve sol ve sağ kenar boşluğu otomatik kullanarak öğeyi ortaladım.

Tarz

Şeffaflık

Bir öğenin doğru stilini elde etmek her zaman CSS'de kullanabildiğimiz araçların türüne bağlı olmuştur. Şeffaflık, 2000'lerin başından ortasına kadar karşılaşacağınız ilk destek çeşitlerinden biridir.

HTML5 ve daha odaklı standart çabalarının ortaya çıkmasıyla birlikte tarayıcılar, opaklık özelliğinin standart bir uygulamasına sahiptir ve yeni Renk Modülü spesifikasyonuna göre alfa kanalı desteğini açığa çıkarmıştır. Bu, RGBA ve HSLA yönergelerini içerir.

a {
renk: rgba (0,255,0,0.5);
arkaplan: rgba (0,0,255,0.05);
sınır: rgba (255,0,0,0.5);
}

HEX değerlerini bulduğunuz her yerde RGBA veya HSLA renklerini kullanabilirsiniz. Ayrıca, spesifikasyonda kontrol edebileceğiniz tanımlanmış adlara sahip genişletilmiş bir eğlenceli renk listesi de vardır. Öğeler arasında dinamik bir karışım oluşturmak istediğinizde bunlar kullanışlıdır.

Filtreler

CSS filtreleri son derece heyecan verici. Üçüncü taraf eklentilere ihtiyaç duymadan bir sayfadaki öğelerin görünümünü ve hissini dinamik olarak değiştirme yeteneğine sahip olmak harika ve Photoshop'ta harcadığınız zamanı büyük ölçüde azaltmanıza yardımcı olacaktır.

img src = "market.webp">
img {
-webkit filtresi: gri tonlama (% 100);
}

CSS filtreleri şu anda yalnızca WebKit tarayıcılarında desteklenmektedir, bu nedenle kullanımları bağımlı değil, katkı niteliğinde olmalıdır. Daha fazlasını buradan okuyun.

Görüntü değiştirme

Metni resimlerle değiştirmek uzun zamandır var. Ne yazık ki, en yeni ve en karmaşık görüntü değiştirme tekniklerinin erişilebilirlik açısından hala dezavantajları var. Ancak son derece zeki ve kendi haklarında benzersiz olan ikisi son zamanlarda gün ışığına çıktı. İlki Scott Kellman tarafından yazılmıştır:

h1 class = ’hide-text’> Web Sitemin Logosu / h1>
.hide-text {
metin girintisi:% 100;
beyaz boşluk: nowrap;
taşma: gizli;
}

İkincisi Nicolas Gallagher tarafından yazılmıştır:

.hide-text {
yazı tipi: 0/0 a;
text-shadow: yok;
renk: şeffaf;
}

Duyarlı video

Duyarlı bir ortamda medyanın doğru şekilde ölçeklenmesini sağlamak zor olabilir. Uyarlanabilir tasarıma saygı duyan giderek daha fazla web sitesi olduğundan, öğelerin boyutlarını ve en boy oranını doğru şekilde kullanmak çok önemlidir.

Gömülü video, üçüncü taraf hizmetlerin içeriği sunma biçimi nedeniyle mücadele edilmesi en zor ortam türlerinden biri olmuştur. Tipik bir YouTube yerleştirmesi şuna benzer:

iframe width = "640" height = "390" src = "http: // www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>

İframe öğesi daha sonra bir Flash nesnesi veya gömme öğesi içerir. İframe {maxwidth: 100%; genişlik değiştiğinde yuvalanmış öğeler düzgün şekilde yeniden boyutlandırılmayacağından} çalışmaz. Yani, biraz hile yapmalıyız.

div>
iframe width = "640" height = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>

İframe'i başka bir öğeye sarmak, bize videoya uygun duyarlı işlevsellik eklememiz için gereken kontrolü sağlayacaktır.

.video {
konum: göreceli;
alt dolgu:% 56.25;
yükseklik: 0;
taşma: gizli;
}
.video iframe,
.video nesnesi,
.video embed {
konum: mutlak;
üst: 0;
sol: 0;
genişlik:% 100;
yükseklik:% 100;
}

.Video sarmalayıcının alt dolgusunu ayarlama:% 56,25; bu yöntemdeki sihirdir. Dolgu kullanmak, kullanılan yüzdenin ebeveynin genişliğine bağlı olacağı anlamına gelir; "% 56, 25" 16: 9 en boy oranı oluşturacaktır. İsterseniz matematiği kendiniz yapın. 9/16 = 0,5625. 0.5625 * 100 = 56.25 (bu bizim yüzdemizdir).

İşlevsellik

Öğeleri kolayca seçme

Bir dizi JavaScript kitaplığının (örneğin jQuery) popülaritesiyle, ECMAScript komitesi ve W3C standartları, işlevsellik geliştiricilerinin yerel olarak eksik olan temel parçalarından birini not aldı - iyi öğe seçimi. GetElementByID () ve getElementByClassName () gibi yöntemler hızlıydı, ancak geliştirici topluluğundan gelen seçici motorlar kadar esnek ve sağlam değildi; querySelectorAll (), standartlar gövdesinin yerel bir seçici yönteminde bu esnekliğin bir kısmını taklit etme yoluydu.

var öğeler = document.querySelectorAll (’# başlık. öğe’);

querySelectorAll () birden çok ve karışık seçiciye geçirilebilir. Bununla ilgili daha fazlasını okuyun.

Yeni diziler oluşturma

Bir dizi üzerinde yineleme yapmak, yazmak için yorucu hale gelen bir şeydir. () Döngüler için yazmak ve yeniden yazmak eğlenceli değildir. JS sürüm 1.6'da map () yöntemi, üzerinde yineleme yapmanın ve başka bir diziden yeni bir dizi oluşturmanın kolay bir yolu için destek sağlamaya başladı.

var people = [’Heather’, ’James’, ’Kari’, ’Kevin’];
var welcomes = people.map (işlev (ad) {
"Merhaba" + ad + ’!’;
});

Bu kodu çalıştırırsak, console.log'u (hoş geldiniz) çalıştıracak olsaydık, yeni bir karşılama dizisi olduğunu görürdünüz ['Merhaba Heather!', 'Merhaba James!', 'Merhaba Kari!', 'Merhaba Kevin!' ].

Belge ve pencere nesnelerini temizleyin

Üçüncü taraf JavaScript kitaplıkları, yerel belge ve pencere nesneleriyle uğraşmaya eğilimlidir. Bu, diğer üçüncü taraf kitaplıkları ve bunları içeren geliştirici için bir sorun olabilir. Her iki taraf olarak, yeni bir örnek oluşturarak her iki nesnenin de temiz bir sürümüyle çalıştığınızdan emin olun. Bunu yapmanın en iyi yolu, bir iframe öğesi oluşturmak, bunu DOM'a eklemek ve bu nesnelerin yeni örneklerini depolamaktır.

var iframe = document.createElement (’iframe’);
iframe.style.display = "yok";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild (iframe);

Web yığınında büyük iyileştirmeler yapılmış olsa da, projemizin düzeni, stili ve işlevselliği içinde karşılaştığımız zorlukları karşılamak için teknoloji paketimizi tamamlamaya ve geliştirmeye devam ediyoruz. İyi bir büyüme ekosistemini sürdürmek için, standart kurumları ve tarayıcı satıcılarını yeni spesifikasyonlar ve yenilikçi özellik uygulamaları ile ilerlemeye devam etmeye teşvik etmeliyiz ve aynı zamanda kendi bilgimizi diğer geliştiriciler ve tasarımcılarla paylaşmalıyız. Daha fazla içgörü, daha az hack.

Darcy Clarke, ödüllü bir geliştirici, WordPress tema şirketi Themify ve günlük anlaşma toplayıcı DealPage'in kurucu ortağı ve jQuery Ekibinin bir üyesidir. Polar Mobile'da kıdemli bir UX geliştiricisi olarak çalışıyor.