Sử dụng biến php trong tệp css
|
Hãy thử điều gì đó khác biệt trên nettuts+ ngay hôm nay. Bất kỳ nhà thiết kế nào đã từng làm việc với các tệp CSS lớn sẽ đồng ý rằng điểm yếu chính của nó là không có khả năng sử dụng các biến. Trong bài viết này, chúng ta sẽ tìm hiểu cách triển khai các biến bằng cách sử dụng mod viết lại URL của PHP và Apache Show
lời nói đầuKỹ thuật này hơi đơn giản. Chúng tôi sẽ yêu cầu Apache chuyển hướng bất kỳ biểu định kiểu nào sang một tập lệnh PHP cụ thể. Tập lệnh này sẽ mở biểu định kiểu và đọc từng dòng một để tìm và thay thế bất kỳ biến nào do người dùng xác định. Cuối cùng, nội dung được phân tích cú pháp sẽ được hiển thị dưới dạng CSS thuần túy; . Để kết thúc hướng dẫn này, chúng ta cũng sẽ xem cách lưu kết quả đã xử lý vào bộ nhớ cache để tránh sử dụng CPU không cần thiết Xin lưu ý rằng cần có một số kiến thức cơ bản về PHP (OOP), Apache và HTTP  Yêu cầu
Bước 1 - Xây dựng dự ánTrước tiên hãy tạo cấu trúc dự án đơn giản của chúng ta. Thêm một chỉ mục. html vào thư mục gốc của dự án của bạn
Bây giờ, hãy tạo một tệp CSS với các biến sau và đặt nó vào thư mục "css" $font: arial, sans-serif;
$main-color: #3D7169; $secondary-color: #000;
h1 {
font: 200% $font;
color: $main-color;
}
p {
background: $secondary-color;
color: $main-color;
font-family: $font;
padding: 10px;
}Cuối cùng, tạo một tệp PHP trống có tên là RewriteEngine on RewriteRule ^(.*\.css)$ enhanced_css.php?css=$06 và một tệp RewriteEngine on RewriteRule ^(.*\.css)$ enhanced_css.php?css=$07 trống. Tệp sau này sẽ ghi đè cấu hình mặc định của máy chủ và được áp dụng cho thư mục và các thư mục con của nó Bây giờ dự án của chúng ta sẽ trông như thế này Bước 2 - Chuyển hướng tệp CSS sang PHP ScriptChúng tôi muốn chuyển hướng bất kỳ URL nào có phần mở rộng CSS sang tập lệnh PHP của chúng tôi. Máy chủ Apache cho phép chúng tôi thực hiện việc này bằng cách sử dụng chế độ Viết lại URL. RewriteEngine on RewriteRule ^(.*\.css)$ enhanced_css.php?css=$08 trong thư mục Apache của bạn. Chỉnh sửa nó và tìm kiếm dòng này. LoadModule rewrite_module modules/mod_rewrite.so Nếu cần, hãy bỏ ghi chú bằng cách xóa dấu “#” được thêm vào trước và khởi động lại Apache để đảm bảo rằng cài đặt cấu hình của bạn đang hoạt động Bây giờ, hãy chỉnh sửa tệp RewriteEngine on RewriteRule ^(.*\.css)$ enhanced_css.php?css=$07 của bạn và thêm các dòng sau RewriteEngine on RewriteRule ^(.*\.css)$ enhanced_css.php?css=$0 Lưu nó. Như đã đề cập trước đó, các dòng trên yêu cầu Apache bắt tất cả các URL bằng. css và chuyển hướng chúng đến "enhanced_css. php". Đường dẫn tệp CSS ban đầu được chuyển vào dưới dạng tham số 'css' Ví dụ ________số 8Sẽ được chuyển hướng đến enhanced_css.php?css=/css/styles.css Ghi chúMột số giải pháp lưu trữ không cho phép cài đặt của chúng bị ghi đè bởi cài đặt của người dùng. Nếu vậy, các liên kết đến biểu định kiểu trong mã HTML phải được thay thế thủ công Trong những trường hợp như vậy, bạn sẽ phải thay thế $font: arial, sans-serif;
$main-color: #3D7169; $secondary-color: #000;
h1 {
font: 200% $font;
color: $main-color;
}
p {
background: $secondary-color;
color: $main-color;
font-family: $font;
padding: 10px;
}0với $font: arial, sans-serif;
$main-color: #3D7169; $secondary-color: #000;
h1 {
font: 200% $font;
color: $main-color;
}
p {
background: $secondary-color;
color: $main-color;
font-family: $font;
padding: 10px;
}1Bước 3 - Phân tích tệp CSS bằng PHPVì các tệp CSS được chuyển hướng tập lệnh PHP của chúng tôi, hãy tạo một lớp có tên "Enhancedcss" để đọc chúng, tìm và thay thế các biến, sau đó hiển thị nội dung dưới dạng CSS thuần túy. Lớp của chúng ta sẽ được khởi tạo bằng cách chuyển /css/styles.css0 cho hàm tạo. Ghi nhớ chuyển hướng RewriteEngine on RewriteRule ^(.*\.css)$ enhanced_css.php?css=$07. /css/styles.css2 chứa đường dẫn đến biểu định kiểu hiện tại $font: arial, sans-serif;
$main-color: #3D7169; $secondary-color: #000;
h1 {
font: 200% $font;
color: $main-color;
}
p {
background: $secondary-color;
color: $main-color;
font-family: $font;
padding: 10px;
}5Việc triển khai cơ bản của lớp bao gồm bốn phương thức. Sau này, chúng tôi sẽ thêm một phương thức lưu vào bộ nhớ đệm $font: arial, sans-serif;
$main-color: #3D7169; $secondary-color: #000;
h1 {
font: 200% $font;
color: $main-color;
}
p {
background: $secondary-color;
color: $main-color;
font-family: $font;
padding: 10px;
}6Người xây dựngKhông có gì gợi cảm ở đây. Chúng tôi kiểm tra xem tệp CSS được yêu cầu có tồn tại không. Nếu không, tập lệnh trả về lỗi 404 http. Đường dẫn của tệp CSS được giữ trong thuộc tính /css/styles.css3 để tính tên của tệp bộ đệm sau này $font: arial, sans-serif;
$main-color: #3D7169; $secondary-color: #000;
h1 {
font: 200% $font;
color: $main-color;
}
p {
background: $secondary-color;
color: $main-color;
font-family: $font;
padding: 10px;
}0Phương pháp phân tích cú phápPhương pháp này mở tệp CSS và đọc từng dòng một $font: arial, sans-serif;
$main-color: #3D7169; $secondary-color: #000;
h1 {
font: 200% $font;
color: $main-color;
}
p {
background: $secondary-color;
color: $main-color;
font-family: $font;
padding: 10px;
}1Chức năng tập tin được sử dụng ở đây. Nó có thể hữu ích vì nó mở một tệp và trả về nội dung dưới dạng một mảng các dòng. Mỗi dòng được ném tới /css/styles.css4 để xử lý các biến. Nội dung được phân tích cú pháp sau đó được trả lại Phương thức FindAndReplacePhương pháp này là đặc điểm chính của lớp chúng ta. Nó tìm các định nghĩa biến, lưu trữ các giá trị của chúng trong một mảng. Khi một biến được tìm thấy và nếu giá trị của nó tồn tại, nó sẽ được thay thế bằng giá trị $font: arial, sans-serif;
$main-color: #3D7169; $secondary-color: #000;
h1 {
font: 200% $font;
color: $main-color;
}
p {
background: $secondary-color;
color: $main-color;
font-family: $font;
padding: 10px;
}2Rất nhiều mã ở đây. Hãy xem xét nó một cách chi tiết $font: arial, sans-serif;
$main-color: #3D7169; $secondary-color: #000;
h1 {
font: 200% $font;
color: $main-color;
}
p {
background: $secondary-color;
color: $main-color;
font-family: $font;
padding: 10px;
}3Ở đây, chúng tôi áp dụng một biểu thức chính quy cho dòng hiện tại. Biểu thức này khớp và trích xuất các mẫu như /css/styles.css5 (và một số biến thể) hoặc /css/styles.css6 trong dòng hiện tại. Tôi sẽ không đi xa hơn ở đây. Cụm từ thông dụng là một chủ đề phức tạp xứng đáng được hướng dẫn riêng. Hàm Preg_match_all trả về tất cả các kết quả phù hợp Ví dụ: dòng thứ ba trong tệp CSS của dự án của chúng tôi - $font: arial, sans-serif;
$main-color: #3D7169; $secondary-color: #000;
h1 {
font: 200% $font;
color: $main-color;
}
p {
background: $secondary-color;
color: $main-color;
font-family: $font;
padding: 10px;
}4- sẽ trả về mảng này $font: arial, sans-serif;
$main-color: #3D7169; $secondary-color: #000;
h1 {
font: 200% $font;
color: $main-color;
}
p {
background: $secondary-color;
color: $main-color;
font-family: $font;
padding: 10px;
}5Chúng tôi giả sử rằng /css/styles.css7 chứa kết quả khớp hoàn chỉnh, /css/styles.css8 chứa tên của các biến và /css/styles.css9 chứa các giá trị. Hãy tổ chức mảng để giữ cho nó rõ ràng hơn $font: arial, sans-serif;
$main-color: #3D7169; $secondary-color: #000;
h1 {
font: 200% $font;
color: $main-color;
}
p {
background: $secondary-color;
color: $main-color;
font-family: $font;
padding: 10px;
}6Bây giờ nó là pha lê $font: arial, sans-serif;
$main-color: #3D7169; $secondary-color: #000;
h1 {
font: 200% $font;
color: $main-color;
}
p {
background: $secondary-color;
color: $main-color;
font-family: $font;
padding: 10px;
}7Chúng tôi đếm có bao nhiêu biến đã được tìm thấy trong dòng hiện tại $font: arial, sans-serif;
$main-color: #3D7169; $secondary-color: #000;
h1 {
font: 200% $font;
color: $main-color;
}
p {
background: $secondary-color;
color: $main-color;
font-family: $font;
padding: 10px;
}8Bằng cách này, chúng ta có thể duyệt qua từng mục nhập của mảng biến. Để làm cho mọi thứ rõ ràng hơn, chúng tôi đặt một số biến mới để xử lý tên và giá trị $font: arial, sans-serif;
$main-color: #3D7169; $secondary-color: #000;
h1 {
font: 200% $font;
color: $main-color;
}
p {
background: $secondary-color;
color: $main-color;
font-family: $font;
padding: 10px;
}9Định nghĩa khác nhauNếu enhanced_css.php?css=/css/styles.css0 không trống, chúng ta đang phải đối mặt với một định nghĩa biến. Vì vậy, chúng tôi phải lưu trữ giá trị này trong thuộc tính enhanced_css.php?css=/css/styles.css1 LoadModule rewrite_module modules/mod_rewrite.so0 Lưu ý rằng chúng ta truyền lại giá trị biến trong phương thức /css/styles.css4. Bằng cách này, các biến tiềm ẩn khác cũng sẽ được xử lý. Các giá trị được lưu trữ trong mảng enhanced_css.php?css=/css/styles.css1 với tên của biến là khóa. Ở cuối tập lệnh, mảng enhanced_css.php?css=/css/styles.css1 trông như thế này. LoadModule rewrite_module modules/mod_rewrite.so1 Ứng dụng biếnNếu enhanced_css.php?css=/css/styles.css0 trống, chúng tôi đang đối mặt với một ứng dụng thay đổi. Chúng tôi kiểm tra xem biến này có tồn tại trong mảng giá trị không. Nếu đúng như vậy, chúng tôi thay thế tên biến bằng giá trị của nó LoadModule rewrite_module modules/mod_rewrite.so2 Sự thay thế này có vẻ phức tạp bất thường. Trên thực tế là không, sự thay thế này chỉ đảm nhiệm việc thay thế /css/styles.css6 nếu nó được theo sau bởi một ký tự không phải (\W) hoặc một ký tự cuối dòng (\z) Cuối cùng, chúng tôi xóa toàn bộ nội dung phù hợp để giữ cho biểu định kiểu rõ ràng và hợp lệ. Dòng đã xử lý được trả về LoadModule rewrite_module modules/mod_rewrite.so3 Phương pháp hiển thịPhương pháp này hiển thị biểu định kiểu được phân tích cú pháp. Để được cung cấp cho trình duyệt dưới dạng nội dung CSS, tiêu đề được đặt thành loại nội dung enhanced_css.php?css=/css/styles.css7 LoadModule rewrite_module modules/mod_rewrite.so4 Bước 4 - Lưu trữ kết quảTại thời điểm này, mọi thứ đang hoạt động hoàn hảo. Tuy nhiên, thao tác này có thể rất tốn CPU khi được sử dụng với các trang web lớn hơn Rốt cuộc, chúng ta không cần phân tích cú pháp các tệp CSS mỗi khi trình duyệt cần. Quy trình chỉ cần được chạy lần đầu tiên để tạo bộ đệm hoặc nếu tệp CSS gốc đã được sửa đổi kể từ lần hoạt động bộ nhớ đệm cuối cùng. Mặt khác, kết quả được hiển thị trước đó có thể được sử dụng lại. Vì vậy, hãy thêm một giải pháp bộ nhớ đệm vào tập lệnh của chúng ta Thêm một thư mục mới có tên cache vào dự án. Nếu cần, hãy cho thư mục này quyền được viết bằng cách áp dụng một enhanced_css.php?css=/css/styles.css8. Bây giờ dự án của chúng ta sẽ trông như thế này Phương pháp bộ đệmMột phương pháp mới đã được thêm vào. Chức năng của nó sẽ là
Tất cả logic được xử lý theo phương pháp dưới đây LoadModule rewrite_module modules/mod_rewrite.so5 Hãy giải thích mã này. Tên tệp bộ đệm được tính từ tên tệp CSS gốc được lưu trước đó trong thuộc tính /css/styles.css3. Cuối cùng, chúng tôi sử dụng chức năng urlencode LoadModule rewrite_module modules/mod_rewrite.so6 Bằng cách đó, một tệp CSS như LoadModule rewrite_module modules/mod_rewrite.so7 sẽ được lưu trữ như LoadModule rewrite_module modules/mod_rewrite.so8 Chúng tôi cần kiểm tra xem tệp bộ đệm đã tồn tại chưa (file_exists) và nếu có, hãy kiểm tra xem ngày tạo của nó có trước ngày sửa đổi (filemtime) của tệp CSS không LoadModule rewrite_module modules/mod_rewrite.so9 Nếu không, chúng tôi tạo/tạo lại tệp bộ đệm RewriteEngine on RewriteRule ^(.*\.css)$ enhanced_css.php?css=$00 Bây giờ phần còn lại của lớp phải đối phó với phương pháp mới này. Hai phương pháp cần phải được sửa đổi RewriteEngine on RewriteRule ^(.*\.css)$ enhanced_css.php?css=$01 Phương pháp phân tích cú pháp hiện kiểm tra bộ đệm trước để chạy toàn bộ quá trình. Nếu không có sẵn bộ đệm, tệp CSS sẽ được phân tích cú pháp, nếu không, nội dung được lưu trong bộ đệm sẽ được trả về RewriteEngine on RewriteRule ^(.*\.css)$ enhanced_css.php?css=$02 Cuối cùng, phương thức hiển thị đúng nội dung (mới hoặc được lưu trong bộ nhớ cache) được cung cấp bởi phương thức bộ nhớ đệm Bộ nhớ đệm trình duyệtVì lý do bảo mật (phiên, nội dung động), các trình duyệt không lưu kết quả PHP trong bộ đệm của chúng. Một tệp CSS thực sẽ được RewriteEngine on RewriteRule ^(.*\.css)$ enhanced_css.php?css=$03 Chúng tôi sao chép ngày sửa đổi cuối cùng của tệp CSS gốc vào kết quả của chúng tôi trong tiêu đề. $font: arial, sans-serif;
$main-color: #3D7169; $secondary-color: #000;
h1 {
font: 200% $font;
color: $main-color;
}
p {
background: $secondary-color;
color: $main-color;
font-family: $font;
padding: 10px;
}00 đến máy chủvới ngày mà $font: arial, sans-serif;
$main-color: #3D7169; $secondary-color: #000;
h1 {
font: 200% $font;
color: $main-color;
}
p {
background: $secondary-color;
color: $main-color;
font-family: $font;
padding: 10px;
}01 đã đưa ra trước đó. . Nếu ngày khớp nhau thì nội dungđã cập nhật và không cần tải lại; . Một cách ngắn hơn là chỉ cần thêm $font: arial, sans-serif;
$main-color: #3D7169; $secondary-color: #000;
h1 {
font: 200% $font;
color: $main-color;
}
p {
background: $secondary-color;
color: $main-color;
font-family: $font;
padding: 10px;
}03 vào tệp. Nội dung sẽ được lưu vào bộ nhớ cache1 giờ (3600 giây) bởi bất kỳ trình duyệt nào. Sự kết luậnXong. Giờ đây, bạn có thể kiểm tra một trong các biểu định kiểu trên máy chủ của mình. Ví dụ: http. // localhost/myproject/css/phong cách. css Tôi có thể sử dụng biến PHP trong CSS không?Tuy nhiên, chỉ với một lượng nhỏ mã php (6 dòng), bạn có thể sử dụng các biến trong css . Ví dụ: màu của "Văn bản tiêu đề" ở trên được quy định là "Xanh lam" bên trong biểu định kiểu xếp tầng, nhưng sau đó được xác định lại thành "Xanh lục" thông qua một biến php, được sử dụng bên trong một loại biểu định kiểu xếp tầng khác (xem bên dưới).
Bạn có thể sử dụng một biến trong CSS không?Các biến CSS có quyền truy cập vào DOM, nghĩa là bạn có thể tạo các biến có phạm vi cục bộ hoặc toàn cầu, thay đổi các biến bằng JavaScript và thay đổi các biến dựa trên truy vấn phương tiện. Một cách hay để sử dụng các biến CSS là khi nói đến màu sắc của thiết kế của bạn
Làm cách nào tôi có thể sử dụng biến từ một tệp khác trong PHP?Ba phương pháp mà bạn có thể sử dụng các biến của một tệp php trong một tệp php khác. . sử dụng phiên để chuyển biến từ trang này sang trang khác. phương pháp. . sử dụng phương thức get và nhận các biến khi nhấp vào liên kết. phương pháp. . nếu bạn muốn chuyển giá trị biến bằng nút thì bạn có thể sử dụng nó theo phương pháp sau. $x='giá trị1' Tại sao CSS của tôi không hoạt động trong PHP?có thể đó là sự cố bộ đệm , chỉ cần xóa tất cả dữ liệu duyệt web, lịch sử, bộ đệm, cookie, v.v. t. c, sau đó đóng trình duyệt và mở lại, nó sẽ khắc phục sự cố như đã khắc phục sự cố của tôi. Nhưng cách tốt nhất để thực sự khắc phục sự cố này là gọi tệp css bằng php. |
