Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
Advertisement
  1. Code
  2. PHP
Code

Mendongkrak CSS Anda dengan PHP Dibaliknya

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Cascading Style Sheet adalah suatu penyajian bahasa lembar gaya. Dalam arti bahwa, tidak memiliki banyak fungsi yang banyak pengembang ingin memuaskan naluri programmer mereka. Hari ini, kita akan membahas bagaimana mendongkrak CSS Anda dengan menempatkan beberapa PHP dibaliknya.

Rincian tutorial

  • Program: Apache, PHP
  • Version: n/a
  • Kesulitan: Menengah
  • Perkiraan Waktu Penyelesaian: 20 menit

Pengenalan

Menggunakan CSS untuk memperkuat sebuah situs web adalah syarat kontemporer di web untuk situs web non-Flash - dan untuk alasan yang baik. CSS itu kuat. Ia dapat membuat atau menghancurkan sebuah situs web (meskipun biasanya IE6 yang melakukan perusakan). Bahkan dengan kegunaannya, desainer dan pengembang sama-sama berharap untuk lebih banyak dari bahasa tersebut sejak awal berdirinya lebih dari dua belas tahun yang lalu dengan CSS Level 1 Rekomendasi. Hari ini, kita akan mengulas beberapa cara untuk Mendongkrak CSS Dengan PHP Dibaliknya.

Supercharging XHTMLCSS

Catatan: Saya tidak akan berdebat untuk atau melawan konsep CSS variabel dan/atau konstanta CSS. Artikel ini ditulis dengan asumsi bahwa Anda akan membuat keputusan mengenai ini sekali disajikan dengan apa yang dapat dilakukan. Artikel ini mengajarkan bagaimana untuk mengatur mereka dan menggunakan mereka, tapi tidak membahas kontroversi secara penuh.

Pengaturan Hal-Hal

Sebelum mendongkrak dimulai, kita harus memastikan bahwa Anda memiliki persyaratan yang tepat untuk melakukannya. Kita akan menggunakan dua metode untuk membuat CSS Anda bekerja dengan PHP, satu yang pendek dan manis, dan satu yang sedikit lebih elegan dan kurang terlihat bagi pengguna. Keduanya sama-sama memiliki kebutuhan dasar dari sebuah server yang menjalankan PHP. Versi yang lebih elegan memerlukan sedikit lebih banyak:

  1. Apache (menjalankan PHP, jelas)
  2. File .htaccess yang dapat diedit

Menyiapkan Metode Sederhana

Web browser tidak pilih-pilih tentang ekstensi file ketika berhadapan dengan tag link HTML. Apa yang mereka pilih-pilih adalah tentang data header yang diterimanya untuk file itu. Yang artinya adalah bahwa Anda dapat me-link file *.php dengan data header yang tepat sebagai pengganti file *.css, dan browser akan menafsirkan hasilnya seperti CSS standar. Untuk melakukannya, tambahkan header PHP yang memberitahu Apache untuk output file CSS:

Kemudian, cukup link ke file PHP seperti yang biasa anda lakukan:

Sekarang setelah Anda melakukan ini, Anda dapat--secara teori--melompat ke bagian berikutnya dari tutorial berurusan dengan variabel dan konstanta CSS, jika Anda ingin; Namun, siapa pun yang melihat sumber Anda akan melihat bahwa Anda memiliki file PHP yang mana seharusnya file CSS. Selain itu, hanya karena browser akan menafsirkan hasilnya dengan benar tidak berarti bahwa ia akan selalu melakukan hal-hal lain seperti caching file di browser. Untuk memperbaikinya, kita beralih ke versi yang sedikit lebih elegan.

Menyiapkan Metode Elegan

Apache dilengkapi dengan sejumlah besar trik .htaccess. Ini adalah salah satu dari mereka. Kami akan memberitahu Apache untuk menafsirkan semua file CSS di folder tertentu sebagai file PHP, dan web browser (dan pengguna), secara umum, tidak tahu bahwa Anda melakukannya. Hal pertama yang harus dilakukan adalah menempatkan data header di file CSS, seperti Metode Sederhana:

Kemudian, bukannya menyimpan file CSS sebagai file *.php, Anda menyimpannya sebagai file *.css, dan Anda menempatkannya dalam folder untuk CSS (dalam contoh kita, ~/css/). Setelah Anda melakukan ini, buat file .htaccess di dalam folder dan tambahkan berikut:

Potongan memberitahu Apache agar menafsirkan semua file CSS pada folder dengan file .htaccess dengan handler skrip PHP. Jika Anda tidak memiliki kemampuan untuk menambahkan ini ke satu folder atau jika Anda perlu ini untuk berlaku di seluruh server, Anda juga dapat menambahkan ini ke file konfigurasi server httpd.conf Apache. Untuk melakukannya, Anda akan menambahkan potongan sebelumnya tepat di bawah kelompok deklarasi AddType dan AddHandler (seperti ini dari salah satu server saya):

Hanya ingat bahwa jika Anda menambahkan ini ke file konfigurasi server httpd.conf bahwa SETIAP file *.css pada server sekarang harus memiliki header PHP text/css dipasang di depannya Inilah sebabnya mengapa saya menyarankan untuk menambahkannya melalui .htaccess

Nyalakan Mesinnya dengan Variabel CSS

Dari Rata-rata Top 100 Survei Kinerja Weblog:

Kami melakukan tes pada 100 blog teratas untuk file CSS eksternal dan ukuran total. Rata-rata 100 blog teratas menggunakan 4 file CSS eksternal (termasuk @import) dengan rata-rata total ukuran file 43.1 K (tidak terkompresi). Jumlah file CSS eksternal berkisar dari 1 ke 18. Ukuran total CSS berkisar dari 0.2K ke 307K yang besar. Perhatikan bahwa analisis ini tidak termasuk CSS internal dalam file (X)HTML. Hal ini mencakup file CSS bersarang yang disebut dengan arahan @import.

Banyak sekali CSS. Mengapa ini? Hal sebanyak itu adalah karena CSS yang disampaikan tidak dikompresi dan tidak dioptimalkan. Semakin besar kemungkinan dugaannya adalah CSS yang menggembung dan kode yang kurang terawat. Salah satu pilihan populer untuk meningkatkan kode rawatan adalah menerapkan Variabel CSS melalui PHP.

Yang ini berarti adalah bahwa bukannya memiliki CSS seperti ini (ya, ini akan menghasilkan penyimpangan dari desain, tapi baik dalam menggambarkan tujuannya):

Anda bisa memiliki CSS seperti ini:

Perhatikan bahwa variabel bernama panjang adalah untuk tujuan ilustrasi saja. Jelas, variabel ini dapat sepanjang atau sependek yang Anda suka, dan variabel yang lebih pendek membuat ukuran file yang lebih kecil.

Dalam contoh di atas, kami telah menggunakan basic variabel untuk mendirikan sebuah skema warna monokrom yang kemudian dapat digunakan seluruh situs web dalam gaya lain. Variabel-variabel ini bisa dengan mudah dipertukarkan dengan $color01, $color02, $color03, dll untuk menghasilkan efek yang sama. Seringkali, desainer dan pengembang web front-end diminta oleh klien "Hai, apakah Anda bisa membuat semua teks sedikit lebih gelap?" atau "Dapatkah Anda membuat semua teks hanya sedikit lebih besar?" Saat menggunakan variabel-variabel seperti ini tidak akan selalu menjadi solusi terbaik, sering akan mengurangi waktu perawatan ketika menggunakan banyak sistem template dan platform blogging (WordPress, Moveable Type, Expression Engine, dll) atau CMS perusahaan (Drupal, Joomla, Bitrix, dll).

Metode alternatif untuk menyimpan variabel adalah menyimpan data dalam array asosiasi (metode yang saya sukai), yang menghasilkan kode lebih seperti berikut:

Perhitungan dalam CSS

Setelah Anda telah mengatur hal-hal untuk menggunakan PHP dengan CSS Anda, Anda kemudian dapat melakukan beberapa hal yang cermat seperti perhitungan. Mari kita asumsikan bahwa Anda ingin mendirikan sebuah sistem yang Anda memberikan sekelompok DIV pada layar, masing-masing dengan berbagai jenis elemen didalamnya. Setiap jenis elemen (yaitu img, p, blockquote, dll) memiliki tinggi dan lebar unik yang dikontrol melalui CSS, dan Anda ingin jumlah margin harus didasarkan dari nilai-nilai ini seperti:

Diagram of Padding Element Measurements

Dalam skenario ini, Anda ingin mengatur grid terstandar yang berisi tiga jenis yang berbeda dari elemen-elemen (img, p, dan blockquote) dikemas dalam dua kontainer yang berbeda (div dan li). Setiap DIV harus menjadi lebar 550px dan tinggi 250px, setiap LI harus menjadi lebar 600px dan tinggi 300px, dan masing-masing jenis elemen memiliki ketinggian dan lebar yang berbeda. Posisi elemen di dalam harus persis di tengah. Seiring waktu, tinggi dan lebar dari DIV/LI dan elemen yang berbeda mungkin akan perlu diganti. Anda bisa secara manual memasukkan jumlah margin untuk masing-masing elemen yang berbeda dan/atau menggunakan informasi kelas tambahan pada DIV kontainer untuk menambah jumlah padding yang sesuai, tapi ini tidak berguna untuk perubahan cepat, seperti yang diinginkan oleh seseorang yang membuat purwa-rupa di browser atau yang memiliki 200 elemen-elemen berbeda yang mereka harus memodifikasi datanya.

Langkah 1 - Struktur

Pertama, kami mengatur konten XHTML yang kita akan beri style seperti:

Langkah 2 - Header PHP dan Deklarasi Variabel

Selanjutnya, kami menyiapkan file PHP/CSS yang kita akan gunakan untuk men-style XHTML. Ini adalah di mana kita menyatakan ukuran standar dari elemen-elemen yang berbeda untuk digunakan di seluruh halaman.

Langkah 3 - CSS dengan Variabel dan Perhitungan PHP

Selanjutnya, kami melanjutkan file PHP dari Langkah 2 dan memanfaatkan variabel-variabel yang kita tetapkan dalam perhitungan. Selain itu, kami menetapkan nilai-nilai MarginX dan MarginY yang dihitung dari elemen-elemen yang berbeda untuk mengurangi jumlah perhitungan yang diperlukan.

Hal ini memungkinkan yang sekarang kita lakukan adalah mengubah ukuran elemen-elemen sekali di bagian atas dari file dan tidak menghitung ulang nilai 12 margin (24 jika nilai margin asimetris). Pahami bahwa saya tidak menyarankan ini akan digunakan dalam setiap proyek Anda berikutnya, tapi teknik semacam ini memiliki keuntungan yang pasti atas standar metode CSS "statis".

Mengecilkan CSS

Seperti disebutkan sebelumnya, CSS dapat menjadi cukup besar. Satu hal yang dapat Anda lakukan untuk mengurangi ukuran CSS adalah men-gzip file CSS Anda secara otomatis. Untuk melakukan ini, Anda memiliki dua pilihan cara melakukannya: langsung dari Apache menggunakan mod_gzip / mod_deflate atau menggunakan metode kompresi built-in PHP, yang akan kita lakukan di sini.

Langkah Satu - Mengatur Potongan Gzipping

Di dalam file CSS kita, kita sudah memiliki sebuah potongan dari PHP yang mengatur header:

Yang harus kita lakukan sekarang, adalah menambahkan satu baris kode mengatur output buffer menggunakan ob_gzhandler sebelum deklarasi header seperti:

Perlu dicatat bahwa ada cara lain untuk melakukan kompresi gzip dan mereka semua memiliki kelebihan dan kekurangan. Metode yang lebih saya sukai adalah menggunakan mod_deflate seperti yang disebutkan sebelumnya, tetapi tidak semua desainer dan pengembang memiliki pilihan itu.

If($usingPHP==TRUE) { return 'Happiness'; }

Menambahkan logika pemrograman untuk bahasa lembar gaya bukanlah hal yang baru. Banyak situs-situs yang menentukan stylesheet apa yang mereka gunakan berdasarkan URL, status login, atau bahkan tanggal. Berikut adalah contoh sederhana yang dapat diterapkan dengan mudah untuk blog dan situs e-commerce (diantara lainnya). Mari kita asumsikan bahwa Anda memiliki tag h1 yang diganti menggunakan metode pengganti gambar Phark yang dijelaskan oleh CSS berikut:

Dengan menambahkan sedikit PHP dalam campuran untuk menentukan tanggal ketika CSS ini dimuat, maka Anda dapat menentukan gambar yang berbeda untuk liburan seperti yang sering dilakukan Google dengan Google Doodles (meskipun mereka menggunakan berbagai solusi teknologi berbeda):

Normal Logo becomes Holiday Logo

Ini adalah contoh yang super sederhana. CSS Anda hanya menunggu untuk ditingkatkan oleh PHP. Apa yang Anda lakukan dengan hal ini dapat bervariasi dari orang ke orang. Salah satu penggunaan pribadi saya adalah menggunakannya sebagai cara untuk menutupi dan menanamkan file @font-face menggunakan data string URI dan memeriksa referer meminta file yang mirip dengan bagian dari teknologi yang digunakan Typekit:

Kontroversi Variabel CSS

Menggunakan variabel dalam CSS, tidak peduli pro dan kontra telah menjadi isu yang kontroversial selama bertahun-tahun. Seperti yang saya katakan di awal artikel ini, saya tidak akan berdebat untuknya atau terhadap konsep Variabel CSS atau Konstanta CSS. Beberapa desainer dan pengembang yang sangat dihormati berpendapat terhadap itu, sementara yang lain berpendapat untuk itu. Saya berharap, untuk web yang lebih baik, bahwa solusi efektif hanya-CSS terjadi lebih cepat daripada nanti. Sementara itu, orang-orang yang mendukung variabel dan konstanta CSS dapat mengandalkan bahasa server-side kami sementara mereka yang tidak mendukungnya hanya akan melanjutkan seperti biasa.

Ide-ide Apa yang Datang dengan Anda?

Saya selalu mencari cara baru dan inovatif untuk mendongkrak CSS saya dengan PHP. Apa beberapa favorit Anda menggunakan skenario untuk pencampuran CSS dengan PHP?


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.