Gunakan PHP dan CSS untuk mengubah ukuran teks halaman web - Saat mendesain situs web Anda, ingatlah satu hal: tidak semua pengunjung adalah anak muda yang cerdas, dan mereka belum tentu sepenuhnya paham dengan berbagai metode penggunaan browser web.
Saat mendesain situs web, ingatlah satu hal: tidak semua pengunjung adalah anak muda yang cerdas, dan mereka belum tentu sepenuhnya paham dengan berbagai cara menggunakan browser web. Desainer yang cerdas memahami hal ini dan sering kali memasukkan berbagai fitur aksesibilitas khusus ke dalam desain situs web sehingga bahkan para manula atau penyandang disabilitas dapat menggunakan situs web dengan mudah dan nyaman tanpa harus mengeluarkan tenaga ekstra.
Pengukur teks adalah salah satu fitur aksesibilitas paling efektif yang mungkin diperlukan oleh situs web mana pun. Singkatnya, ini adalah alat yang digunakan untuk mengubah ukuran teks halaman web Banyak browser yang sudah dilengkapi dengan fitur ini, namun browser web pemula belum mengetahui cara menggunakan fitur ini. Oleh karena itu, perancang situs web sering kali menerapkan fitur ini dengan menempatkan tombol yang lebih mudah digunakan di setiap halaman web.
Panduan ini akan menunjukkan cara menambahkan ukuran teks fungsional ini ke halaman web Anda menggunakan PHP dan CSS, jadi lanjutkan dan tambahkan aksesibilitas ini ke situs web Anda dan dapatkan hasil maksimal dari pengguna yang memiliki 50+ poin Kudos, baca terus dan Anda akan pelajari cara menggunakannya.
CATATAN: Panduan ini mengasumsikan Anda sudah menginstal Apache dan PHP.
Bagaimana cara kerjanya?
Sebelum menulis kode, ada baiknya meluangkan waktu untuk memahami cara kerja pengukur teks. Setiap halaman di situs berisi serangkaian kontrol yang memungkinkan pengguna memilih ukuran teks halaman: Kecil, Sedang, dan Besar. Setiap ukuran font sesuai dengan lembar gaya CSS yang menyimpan teks yang digunakan untuk halaman tersebut ukuran teks halaman.
Ketika pengguna membuat pilihan, PHP menyimpan ukuran font yang dipilih oleh pengguna dalam variabel sesi, dan kemudian memuat ulang halaman web. Halaman tersebut akan membaca ukuran font yang dipilih dari variabel sesi dan secara dinamis memanggil style sheet yang sesuai untuk memperbaruinya .Render ulang halaman dengan ukuran font lebih kecil atau ukuran font lebih besar.
Langkah pertama dalamproses
: Membuat halaman web
dimulai dengan membuat dokumen HTML. Pertama, lengkapi konten Placeholder.
Daftar A:
Ukuran teks: kecil |. href="resize.php?s=medium">sedang |. besar
Loremipsum dolor sit amet,
consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore
magna aliqua
Ad minimal veniam, latihan quisnostrud ullamcolaboris nisi utaliquip ex ea
commodoconsequat.
Duisauteirure dolor in reprehenderit in
voluptatevelitessecillumdoloreeufugiatnullapariatur.
Kecuali sintoccaecatcupidatat non proident, sunt in culpa qui
petugasseruntmollitanim id estlaborum.
Berikan perhatian khusus pada hyperlink teks di bagian atas halaman. Setiap hyperlink menunjuk ke file skrip bernama resize.php dan meneruskannya ke ukuran font yang dipilih melalui metode URL GET.
Simpan dokumen ini di direktori server web Anda dengan ekstensi .php, misalnya index.php.
Langkah 2: Membuat style sheet
Selanjutnya, buat file style sheet untuk setiap ukuran teks: small.css, medium.css dan large.css Ini adalah isi file dari small.css:
body {
jenis huruf: 10 piksel
}
Demikian pula, Anda dapat membuat medium.css dan large.css, masing-masing menggunakan 17px dan 25px, dan menyimpan file style sheet ini di direktori yang sama dengan halaman web yang dibuat pada langkah sebelumnya.
Langkah 3: Buat mekanisme perubahan ukuran teks
Seperti yang diperkenalkan di atas, halaman web dapat "mengetahui" file style sheet mana yang akan dimuat dengan mencari variabel sesi yang telah ditentukan sebelumnya. Variabel sesi dikontrol melalui file skrip resize.php (lihat Daftar B ), file ini diaktifkan ketika pengguna mengklik tombol untuk mengubah ukuran teks di bagian atas halaman web. Ini adalah isi dari resize.php:
Daftar B
// mulai sesi
// impor ukuran yang dipilih ke dalam sesi
sesi_mulai();
$_SESSION['ukuran teks'] = $_GET['];
header("Lokasi: " .$_SERVER['HTTP_REFERER']);
?>
Ini sangat sederhana. Saat pengguna memilih ukuran teks baru, resize.php memperoleh nilai ukuran font melalui metode GET dan menyimpannya dalam variabel sesi $_SESSION['textsize'], lalu mereset browser Direct ke halaman pertama yang dibuka.
Tentu saja, masih ada komponen yang hilang di sini: halaman web cukup pintar untuk secara otomatis mendeteksi ukuran teks yang saat ini dipilih oleh pengguna dan memuat style sheet yang sesuai. Untuk menambahkan fungsi ini, buka file halaman web Anda index.php dan tambahkan pernyataan berikut di awal file (lihat Listing C):
Listing C
// mulai sesi
//impor variabel
sesi_mulai();
// menyetel ukuran teks default untuk halaman ini
if (!isset($_SESSION['ukuran teks'])) {
$_SESSION['ukuran teks'] = 'sedang';
}
?>
Anda juga harus menambahkan link stylesheet di antara elemen ..., sebagai berikut:
ketik = "teks/css">
Ini Listing D. File lengkap index.php akan terlihat seperti ini:
Listing D:
// mulai sesi
//impor variabel
sesi_mulai();
// menyetel ukuran teks default untuk halaman ini
if (!isset($_SESSION['ukuran teks'])) {
$_SESSION['ukuran teks'] = 'sedang';
}
?>
ketik="teks/css">
Ukuran teks: kecil |.href="resize.php?s=medium">sedang |
Loremipsum dolor duduk amet,
consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore
magna aliqua
Ad minimal veniam, latihan quisnostrud ullamcolaboris nisi utaliquip ex ea
commodoconsequat.
Duisauteirure dolor in reprehenderit in
voluptatevelitessecillumdoloreeufugiatnullapariatur.
Kecuali sintoccaecatcupidatat non proident, sunt in culpa qui
petugasseruntmollitanim id estlaborum.
Seharusnya sangat mudah untuk memahami cara kerjanya. Ketika halaman web dimuat, ia melanjutkan sesi saat ini dan memeriksa apakah variabel $_SESSION['textsize'] cocok dengan ukuran font yang dipilih saat ini, dan kemudian secara dinamis memuat style sheet yang sesuai. melalui elemen. , yang akan menyebabkan halaman web dirender ulang secara otomatis pada ukuran yang benar. Penggunaan gabungan PHP dan CSS sedikit berbeda dengan metode tradisional, yang menggunakan JavaScript untuk mengubah style sheet CSS secara dinamis. Dibandingkan dengan metode JavaScript, keuntungan dari metode PHP adalah Anda tidak perlu bergantung pada dukungan klien untuk JavaScript. Khawatir tentang membuat karya khusus untuk browser tertentu, mungkin Anda akan menemukan pendekatan ini berfungsi dengan baik saat Anda mulai mendesain situs web, selamat coding!