Teknik HTML, CSS, dan JavaScript penting

Pengarang: Monica Porter

Tanggal Pembuatan: 22 Berbaris 2021

Tanggal Pembaruan: 17 Boleh 2024

Video: 🔴 Membuat Website Dengan HTML, CSS, Dan JavaScript

Isi

Tata Letak
Clearfix
Ukuran kotak
Multi-kolom
Perhitungan
Gaya
Transparansi
Filter
Penggantian gambar
Video responsif
Kegunaan
Memilih elemen dengan mudah
Membuat array baru
Bersihkan dokumen dan objek jendela
Suka ini? Baca ini!

Artikel ini pertama kali muncul di edisi 234 majalah .net - majalah terlaris di dunia untuk desainer dan pengembang web.

Teknik, pada intinya, adalah cara untuk melaksanakan tugas dan, sebagai pengembang dan desainer frontend, kami memiliki banyak tugas. Konon, kita sering lupa betapa lanskap ini telah berubah. Dari 2002 hingga 2010, komunitas kami busuk dengan kode dan sumber daya yang membengkak, menghambat kinerja dan pemeliharaan. Untuk mengatasinya, kami membuat banyak tip, trik, dan retasan yang kami sebut 'teknik'. Kami masih menyelesaikan tugas, hanya saja tidak dengan cara yang paling efisien.

Dengan melakukan 360, beberapa tahun terakhir telah melihat standar yang lebih baik dan penerapan standar muncul, memungkinkan kami sebagai komunitas untuk mengembangkan 'teknik' yang lebih baru dan lebih maju. Lanskap baru inilah yang dianggap sebagai 'web modern'.

Karena 'Web 2.0' menjadi stagnan dan membingungkan, begitu juga dengan 'web modern'. Beri waktu. Meskipun demikian, untuk saat ini, kita dapat menggunakan dan menyalahgunakan istilah tersebut selama ada pemahaman yang sama tentang apa yang diwakilinya.

Pada tahun 2010 spesifikasi HTML5 diluncurkan, menyediakan lingkungan web semi-standar yang benar-benar baru. Peramban seperti Opera, Firefox, Chrome, dan Safari mengikuti gelombang baru ini dan mendorong tim pengembang mereka ke batas baru penerapan standar dan eksplorasi API. Untuk memberi Anda gambaran tentang bagaimana 'mengaktifkan' browser ini, periksa visualisasi www.html5readiness.com untuk mengubah dukungan HTML5.

Jangan khawatir tentang kurangnya dukungan di Internet Explorer. Kami dapat mengatasi ini berkat Google Chrome Frame. Sejak Google memperkenalkannya pada tahun 2010, ini menjadi mekanisme dukungan masuk untuk Internet Explorer. Semua versi IE dapat ditargetkan dengan Chrome Frame, yang meminta pengguna baru untuk mengunduh plugin yang merender situs web yang diikutsertakan dengan versi Chrome yang ringan, di dalam IE. Untuk menerapkan Chrome Frame, kami menambahkan tag meta> berikut ke dalam tag head> situs kami.

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

Dari sini kami dapat meminta pengguna IE untuk mengunduh plugin, jika belum diinstal, menggunakan JavaScript:

jenis skrip = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / script>
script>
window.onload = function () {
CFInstall.check ({
mode: "overlay",
tujuan: "http://www.yourdomain.com"
});
};
/ script>

tujuan dapat disetel untuk mengirim pengguna ke tautan tertentu setelah memasang plugin. Peringatan: meskipun Chrome Frame memberi kami metode untuk mengembangkan secara ketat untuk peramban yang benar-benar modern, kami tidak boleh lupa bahwa pengguna memiliki opsi untuk tidak mengunduh pengaya jika mereka tidak menginginkannya. Jika tidak, dan Anda diminta untuk memberikan dukungan untuk satu atau versi lain dari IE, Anda harus meluangkan lebih banyak waktu untuk mencari tahu apa yang Anda bisa dan tidak bisa berikan, dengan pengalaman Anda, lintas-browser..

Dengan kode ini memberikan lapangan bermain yang jauh lebih datar untuk dikembangkan di tumpukan web modern, kita dapat bergerak maju dengan pikiran kita dengan nyaman. Anda mungkin ingat harus membuat sejumlah peretasan khusus browser untuk membuat situs Anda terstruktur lintas-browser, membuat elemen kosong yang tak terhitung jumlahnya untuk digunakan dengan gambar yang diiris, atau bahkan menulis kode JavaScript yang terlalu bertele-tele atau berlebihan untuk mendapatkan fungsionalitas paling sederhana untuk bekerja. Semua rasa sakit ini, dalam arti tertentu, adalah masalah yang sama yang kita khawatirkan hari ini. Kami masih memperjuangkan lebih banyak kontrol dan alat yang lebih baik untuk memerangi tata letak, gaya, dan fungsionalitas tetapi pada level yang sudah matang.

Tata Letak

Clearfix

Mengambang elemen diperkenalkan kembali di CSS 2.1 tetapi tidak pernah menjadi solusi lengkap yang kami harapkan. Salah satu masalah terbesar adalah mempertahankan dimensi elemen induk saat elemen anak diapungkan. Untuk mengatasi hal ini, teknik clearfix telah dibuat.

Ambil HTML berikut:

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

Teknik ini ditulis oleh Nicolas Gallagher:

.clearfix: sebelum,
.clearfix: setelah {
kandungan: " ";
tampilan: table;
}
.clearfix: setelah {
jelas: keduanya;
}
.clearfix {
* zoom: 1;
}

Jika Anda menggunakan HTML5Boilerplate untuk memulai proyek Anda, maka Anda sudah memiliki versi teknik clearfix yang dipanggang.

Ukuran kotak

Selama bertahun-tahun pengembang memperdebatkan penerapan model kotak mana yang lebih masuk akal. Mode Quirks vs Standards benar-benar berarti: 'apakah dimensi elemen berubah, setelah disetel, saat batas dan padding diterapkan, atau tidak'.

Sekarang secara luas disepakati bahwa lebih masuk akal jika border dan padding mengambil ruang yang tersedia di dalam elemen, dan tidak menambah lebar atau tinggi elemen. Perdebatan menjadi tidak relevan dengan penerapan ukuran kotak yang meluas. Browser akan mengambil isyarat dari Anda, bukan sebaliknya.

Dipopulerkan oleh Chris Coyier dan Paul Irish, teknik yang mencakup semua dapat diterapkan dengan yang berikut:

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
ukuran kotak: border-box;
}

Menggunakan pemilih * di CSS telah diperdebatkan, karena potensi kinerja yang muncul. Jenis klaim ini sembrono jika Anda tidak terlalu mengoptimalkan semua aspek lain dari situs web / aplikasi Anda. Menggunakan border-box akan membuat browser menambahkan padding dan border di dalam set ruang yang tersedia. 'Mode Standar' dapat digunakan dengan menyetel ukuran kotak ke kotak konten.

Multi-kolom

Web sangat terinspirasi oleh bentuk dan jenis tulisan. Sayangnya, kami terjebak di fase perkamen. Beberapa dari masalah ini akan muncul dengan spesifikasi Wilayah Paged-Media dan CSS yang telah lama ditunggu-tunggu. Meskipun demikian, langkah pertama menuju tata letak yang lebih mirip majalah diambil saat browser mulai menerapkan multikolom CSS. Kode untuk menghasilkan efek ini cukup mudah:

p {
-webkit-kolom-hitungan: 2;
-moz-kolom-hitungan: 2;
kolom-hitungan: 2;
}

Anda dapat mempelajari lebih lanjut tentang spesifikasi multi-kolom CSS3, serta fallback JavaScript yang dapat Anda gunakan untuk browser apa pun tanpa dukungan, dari blog A List Apart.

Perhitungan

Menghitung dimensi bisa jadi sulit. Kembali ke masa lalu, kami tidak memiliki cara untuk melakukan penghitungan unit apa pun, apalagi penghitungan unit campuran. Itu semua berubah berkat kalk. Membuat efek empuk yang tidak mempengaruhi lebar elemen awal atau menggunakan sesuatu seperti ukuran kotak: border-box; adalah, hingga saat ini, hanya mungkin dengan menambahkan elemen penampung ekstra.

.padded {
margin: 0 otomatis;
posisi: relatif;
lebar: -webkit-calc (100% - (20px * 2));
lebar: -moz-calc (100% - (20px * 2));
lebar: kalk (100% - (20px * 2));
}

calc () menangani kalkulasi lebar yang tepat berdasarkan lebar induk .padded dan minus padding 20px yang ditentukan. Saya mengalikan ini dengan 2 untuk kedua sisi elemen saya, memusatkan elemen menggunakan pemosisian relatif dan otomatis margin kiri dan kanan.

Gaya

Transparansi

Mendapatkan gaya elemen yang tepat selalu bergantung pada jenis alat yang kami sediakan untuk kami di CSS. Transparansi adalah salah satu varian dukungan pertama yang akan Anda temui di awal hingga pertengahan 2000-an.

Dengan munculnya HTML5 dan upaya standar yang lebih terfokus, browser memiliki penerapan standar properti opasitas, dan telah memperlihatkan dukungan saluran alfa sesuai spesifikasi Modul Warna yang baru. Ini termasuk pedoman RGBA dan HSLA.

Sebuah {
warna: rgba (0,255,0,0.5);
latar belakang: rgba (0,0,255,0.05);
batas: rgba (255,0,0,0.5);
}

Anda dapat menggunakan warna RGBA atau HSLA di mana pun Anda menemukan nilai HEX. Ada juga daftar panjang warna-warna menyenangkan dengan nama-nama tertentu yang dapat Anda lihat langsung di spesifikasinya. Ini berguna saat Anda ingin membuat perpaduan dinamis antar elemen.

Filter

Filter CSS sangat menarik. Memiliki kemampuan untuk secara dinamis mengubah tampilan dan nuansa elemen pada halaman tanpa perlu plug-in pihak ketiga adalah luar biasa, dan akan sangat membantu mengurangi waktu yang Anda habiskan di Photoshop.

img src = "market.webp">
img {
-webkit-filter: grayscale (100%);
}

Filter CSS saat ini hanya didukung di browser WebKit sehingga penggunaannya harus bersifat aditif, tidak bergantung. Baca lebih lanjut di sini.

Penggantian gambar

Mengganti teks dengan gambar sudah ada sejak lama. Sayangnya, masih ada kekurangan, dari segi aksesibilitas, hingga teknik penggantian gambar terbaru dan tercanggih. Tetapi dua baru-baru ini terungkap bahwa mereka sangat pintar, dan unik dalam hak mereka sendiri. Yang pertama ditulis oleh Scott Kellman:

h1 class = ’hide-text’> Logo Situs Saya / h1>
.hide-text {
indentasi teks: 100%;
ruang-putih: nowrap;
overflow: tersembunyi;
}

Yang kedua ditulis oleh Nicolas Gallagher:

.hide-text {
fonta: 0/0 a;
text-shadow: tidak ada;
warna: transparan;
}

Video responsif

Membuat media diskalakan dengan benar dalam lingkungan yang responsif dapat menjadi tantangan. Dengan semakin banyak situs web yang menghormati desain adaptif, penting untuk menangani dimensi dan rasio aspek elemen dengan benar.

Video tersemat telah menjadi salah satu jenis media yang lebih menantang untuk diperdebatkan karena cara layanan pihak ketiga menyajikan konten. Sematan khas YouTube terlihat seperti ini:

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

Elemen iframe kemudian berisi objek Flash atau elemen sematan. Menggunakan sesuatu seperti iframe {maxwidth: 100%; } tidak akan berfungsi karena elemen yang disarangkan tidak diubah ukurannya dengan benar saat lebarnya berubah. Jadi, kita harus melakukan beberapa tipu daya.

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

Membungkus iframe dengan elemen lain akan memberi kita kontrol yang kita butuhkan untuk menambahkan fungsionalitas responsif yang tepat ke video.

.video {
posisi: relatif;
padding-bottom: 56,25%;
tinggi: 0;
overflow: tersembunyi;
}
.video iframe,
objek .video,
.video embed {
posisi: mutlak;
atas: 0;
kiri: 0;
lebar: 100%;
tinggi: 100%;
}

Mengatur padding-bottom .video wrapper: 56.25%; adalah keajaiban dalam metode ini. Menggunakan padding berarti persentase yang digunakan akan didasarkan pada lebar induk; ‘56 .25% 'akan membuat rasio aspek 16: 9. Lakukan perhitungan matematika sendiri, jika Anda mau. 9/16 = 0,5625. 0,5625 * 100 = 56,25 (ini adalah persen kami).

Kegunaan

Memilih elemen dengan mudah

Dengan popularitas sejumlah pustaka JavaScript (jQuery, misalnya), komite ECMAScript dan standar W3C mencatat salah satu bagian inti dari fungsionalitas yang kurang dimiliki pengembang secara native - pemilihan elemen yang baik. Metode seperti getElementByID () dan getElementByClassName () cepat tetapi tidak sefleksibel dan sekuat mesin pemilih yang berasal dari komunitas pengembang; querySelectorAll () adalah cara badan standar untuk meniru beberapa fleksibilitas tersebut dalam metode pemilih asli.

var items = document.querySelectorAll (’# header .item’);

querySelectorAll () dapat diberikan beberapa pemilih campuran. Baca lebih lanjut tentang ini.

Membuat array baru

Mengulangi array adalah sesuatu yang melelahkan untuk ditulis. Menulis dan menulis ulang untuk () loop tidaklah menyenangkan. Dalam JS versi 1.6, metode map () mendarat memberikan dukungan untuk cara mudah untuk mengulang dan membuat array baru dari yang lain.

var people = [’Heather’, ’James’, ’Kari’, ’Kevin’];
var menyambut = people.map (fungsi (nama) {
kembali 'Hai' + nama + '!';
});

Menjalankan kode ini, jika kita berada di console.log (selamat datang), Anda akan melihat welcome adalah array baru [‘Hi Heather! ',‘ Hi James!', ‘Hi Kari! ',‘ Hai Kevin!' ].

Bersihkan dokumen dan objek jendela

Pustaka JavaScript pihak ketiga cenderung mengotak-atik dokumen asli dan objek jendela. Ini bisa menjadi masalah bagi pustaka pihak ketiga lainnya, dan pengembang termasuk mereka. Sebagai salah satu pihak, pastikan Anda bekerja dengan versi bersih dari kedua objek dengan membuat instance baru dari keduanya. Cara terbaik untuk melakukannya adalah dengan membuat elemen iframe, memasukkannya ke DOM dan menyimpan contoh baru dari objek tersebut.

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

Meskipun telah ada peningkatan besar pada tumpukan web, terus menyempurnakan dan menyempurnakan rangkaian teknologi kami untuk memenuhi tantangan yang kami hadapi dalam tata letak proyek, gaya dan fungsionalitas masih sangat penting. Untuk mempertahankan ekosistem pertumbuhan yang baik, kami harus mendorong badan standar dan vendor browser untuk melanjutkan kemajuan dengan spesifikasi baru dan implementasi fitur inovatif sambil berbagi pengetahuan kami dengan sesama pengembang dan desainer. Lebih banyak wawasan, lebih sedikit peretasan.

Darcy Clarke adalah pengembang pemenang penghargaan, salah satu pendiri perusahaan tema WordPress Themify dan agregator kesepakatan harian DealPage, dan anggota Tim jQuery. Dia bekerja di Polar Mobile sebagai pengembang senior UX.