Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP

Mendongkrak CSS Anda dengan PHP Dibaliknya

by
Length:LongLanguages:

Malay (Melayu) translation by Umar bin Abdul Aziz (you can also view the original English article)

Cascading Style Sheet adalah sebuah penyajian bahasa lembar gaya. Dalam arti itu, tidak memiliki banyak fungsi yang banyak pengembang ingin memuaskan programmer instinct mereka. Hari ini, kita akan membahas bagaimana mendongkrak CSS anda dengan meletakkan beberapa PHP dibaliknya.

Tutorial terperinci

  • Program : Apache, PHP
  • Versi : n / a
  • Kesulitan : Menengah
  • Anggaran Penyelesaian Masa : 20 minit

Pengenalan

Menggunakan CSS untuk memperkuat sebuah laman web adalah syarat kontemporer di web untuk laman web non-Flash - dan untuk alasan yang baik. CSS itu kuat. Ia boleh membuat atau menghancurkan laman web (walaupun biasanya IE6 yang melakukan perusakan). Bahkan dengan kegunaannya, perancang dan pengembang sama-sama berharap untuk lebih banyak dari bahasa itu sejak awal berdirinya lebih dari dua belas tahun lalu dengan CSS Level 1 Recommendation. Hari ini, kami akan mengkaji beberapa cara untuk Mendongkrak CSS Dengan PHP Di sebaliknya .

Supercharging XHTMLCSS

Catatan: Saya tidak akan berdebat untuk atau menentang konsep CSS dan / atau CSS persamaan. Artikel ini ditulis dengan menganggap bahawa anda akan membuat keputusan tentang ini sekali disajikan dengan apa yang dapat dilakukan. Artikel ini mengajarkan bagaimana untuk mengatur mereka dan menggunakan mereka, tetapi tidak membincangkan kontroversi secara penuh.

Pengaturan Hal-Hal

Sebelum mendongkrak bermula, kita harus memastikan bahawa anda mempunyai syarat yang tepat untuk melakukannya. Kita akan menggunakan dua kaedah untuk membuat CSS anda berfungsi dengan PHP, satu yang pendek dan manis, dan satu yang sedikit lebih elegan dan kurang terlihat bagi pengguna. Keduanya sama-sama memiliki dasar kebutuhan dari sebuah server yang menjalankan PHP. Versi yang lebih elegan memerlukan sedikit lebih banyak:

  1. Apache (menjalankan PHP, jelas)
  2. Fail .htaccess yang boleh diedit

Menyiapkan Metode Sederhana

Pelayar web tidak pilih-pilih tentang fail sambungan apabila berhadapan dengan tag HTML pautan. Apa yang mereka pilih-pilih adalah tentang pengepala data yang diterima untuk fail tersebut. Yang artinya adalah bahawa anda dapat me-link file * .php dengan header data yang tepat sebagai pengganti file * .css, dan browser akan menafsirkan hasilnya seperti standar CSS. Untuk melakukannya, tambahkan header PHP yang memberitahu Apache untuk fail output CSS:

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

Sekarang setelah anda melakukan ini, anda dapat - secara teori - melompat ke bagian berikutnya dari tutorial berurusan dengan CSS variabel dan konstan, jika Anda ingin; Namun, siapa pun yang melihat sumber Anda akan melihat bahwa Anda memiliki file PHP yang seharusnya menjadi 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 lebih elegan.

Menyiapkan Elegan Metod

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

Kemudian, bukan menyimpan fail 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 dalam folder dan tambahkan berikut:

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

Hanya ingat bahawa jika anda menambah ini ke server konfigurasi file httpd.conf bahawa 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 CSS Variabel

Dari Rata-rata Top 100 Survei Kinerja Weblog :

Kami melakukan ujian pada 100 blog teratas untuk fail CSS external dan total size. Rata-rata 100 blog teratas menggunakan 4 fail CSS eksternal (termasuk @import) dengan rata-rata jumlah saiz fail 43.1 K (tidak dikompresi). Jumlah fail CSS eksternal berisar dari 1 ke 18. Saiz total CSS berisar dari 0.2K ke 307K yang besar. Perhatikan bahawa analisis ini tidak termasuk HTML dalaman dalam file (X) HTML. Hal ini termasuk file CSS sarang yang disebut dengan arahan @import.

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

Yang ini bermakna adalah bahawa tidak mempunyai CSS seperti ini (ya, ini akan menghasilkan penyimpangan dari desain, tetapi baik dalam menggambarkan tujuannya):

Anda boleh mempunyai CSS seperti ini:

Perhatikan bahawa variable bernama panjang adalah untuk tujuan ilustrasi saja. Jelas, ini dapat berubah sepanjang masa atau sependek yang anda suka, dan lebih pendek variables membuat saiz file yang lebih kecil.

Dalam contoh di atas, kami telah menggunakan variasi asas untuk mendirikan sebuah monokrom warna skema yang kemudian dapat digunakan seluruh laman web dalam gaya lain. Variabel-variable ini boleh dengan mudah dipertukarkan dengan $ color01, $ color02, $ color03, dll untuk menghasilkan efek yang sama. Seringkali, pengembang dan pengembang web front-end diminta oleh klien "Hai, apakah Anda dapat membuat semua teks sedikit lebih gelap?" atau "Bolehkah anda membuat semua teks hanya sedikit lebih besar?" Saat menggunakan variables seperti ini tidak akan selalu menjadi solusi terbaik, sering akan mengurangi waktu perawatan ketika menggunakan banyak template sistem dan blogging platform (Wordpress, Jenis Pindah, Mesin Ekspresi, dll) atau perusahaan CMS (Drupal, Joomla, Bitrix, dll) .

Alternatif kaedah untuk menyimpan variables ialah menyimpan data dalam array asosiasi (metode yang saya sukai), yang menghasilkan kode lebih seperti berikut:

Perhitungan dalam CSS

Setelah anda mengatur hal-hal untuk menggunakan PHP dengan CSS anda, Anda dapat melakukan beberapa hal yang cermat seperti perhitungan. Mari kita asumsikan bahawa Anda ingin mendirikan sebuah sistem yang Anda berikan kumpulan DIV pada layar, masing-masing dengan berbagai jenis elemen di dalamnya. Setiap jenis elemen (iaitu img, p, blockquote, dll) mempunyai tinggi dan lebar unik yang dikendalikan melalui CSS, dan Anda ingin jumlah margin harus didasarkan dari nilai-nilai seperti:

Diagram of Padding Element Measurements

Dalam skenario ini, anda ingin mengatur terstandar grid yang mengandungi tiga jenis yang berbeda dari unsur-unsur (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 600px lebar dan 300px tinggi, dan masing-masing elemen memiliki ketinggian dan lebar yang berbeda. Posisi elemen di dalam harus sama di tengah. Sepanjang masa, tinggi dan lebar dari DIV / LI dan berbeza elemen mungkin akan perlu diganti.Anda dapat secara manual memasukkan jumlah margin untuk masing-masing elemen yang berbeda dan / atau menggunakan tambahan kelas informasi pada kontainer DIV untuk menambah jumlah padding yang sesuai, tetapi ini tidak berguna untuk perubahan cepat, seperti yang diinginkan oleh seseorang yang membuat purwa-rupa di pelayar atau yang mempunyai 200 elemen-elemen yang berbeza yang mereka perlu memodifikasi data.

Langkah 1 - Struktur

Pertama, kami mengatur kandungan XHTML yang akan kami beri gaya seperti:

Langkah 2 - Header PHP dan Variabel Deklarasi

Selanjutnya, kami menyediakan file PHP / CSS yang akan kami gunakan untuk menyusun XHTML. Ini adalah di mana kita menyatakan ukuran standard dari unsur-unsur yang berbeza untuk digunakan di seluruh halaman.

Langkah 3 - CSS dengan PHP Variabel dan Penghitungan

Selanjutnya, kami meneruskan fail PHP dari Langkah 2 dan memanfaatkan variasi yang kami tetapkan dalam perhitungan. Selain itu, kami menetapkan nilai MarginX dan MarginY yang dikira dari pelbagai elemen untuk mengurangkan jumlah pengiraan yang diperlukan.

Hal ini membolehkan yang sekarang kita lakukan adalah mengubah elemen-elemen sekali pada bahagian atas dari fail dan tidak mengira nilai 12 margin (24 jika asimetris margin nilai). Pahami bahawa saya tidak menyarankan ini akan digunakan dalam setiap projek anda seterusnya, tetapi teknik semacam ini mempunyai keunggulan keuntungan atas metode standar CSS "statis".

Mengecilkan CSS

Seperti disebutkan sebelumnya, CSS boleh menjadi cukup besar. Satu hal yang boleh anda lakukan untuk mengurangkan saiz CSS adalah men-gzip fail CSS anda secara automatik. Untuk melakukan ini, anda mempunyai dua pilihan cara melakukannya: langsung dari Apache menggunakan mod_gzip / mod_deflate atau menggunakan compression method built-in PHP, yang akan kita lakukan di sini.

Langkah Satu - Menyusun Potongan Gzipping

Di dalam fail CSS kami, kami sudah mempunyai potongan dari PHP yang mengatur header:

Yang harus kita buat sekarang, adalah menambah satu baris kod yang mengatur output buffer menggunakan ob_gzhandler sebelum deklarasi header seperti:

Perlu dicatat bahawa ada cara lain untuk melakukan kompresi gzip dan mereka semua memiliki kelebihan dan kekurangan. Cara yang lebih saya sukai adalah menggunakan mod_deflate seperti yang disebut sebelumnya, tetapi tidak semua perancang dan pengembang mempunyai pilihan itu.

Jika ($ menggunakanPHP == TRUE) {kembali 'Kebahagiaan'; }

Tambah logika pemrograman untuk bahasa lembar gaya bukanlah hal baru. Banyak laman web yang menentukan gaya halaman apa yang mereka gunakan berdasarkan URL, login status, atau bahkan tanggal. Berikut adalah contoh sederhana yang dapat diterapkan dengan mudah untuk blog dan e-commerce laman web (antara lain). Mari kita asumsikan bahawa Anda mempunyai tag h1 yang diganti menggunakan pengganti gambar Phark yang dijelaskan oleh CSS berikut:

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

Normal Logo becomes Holiday Logo

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

CSS Variabel Kontroversi

Menggunakan variasi 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 pereka dan pengembang yang sangat dihormati berpendapat terhadap itu , sementara yang lain berpendapat untuk itu . Saya berharap, untuk web yang lebih baik, bahawa penyelesaian yang berkesan hanya-CSS berlaku lebih cepat daripada nanti. Sementara itu, orang-orang yang menyokong CSS dan CSS boleh bergantung pada bahasa server-side kita sementara mereka yang tidak mendukungnya akan terus menerus seperti biasa.

Ide-idea Apa yang Datang dengan Anda?

Saya sentiasa mencari cara baru dan inovatif untuk mendongkrak CSS saya dengan PHP. Apa beberapa kegemaran anda menggunakan skenario untuk mencampuran 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.