Php dynamic css class

Содержание

Dynamic CSS classes
More Answer
More answer with same ag
Динамический CSS?
Переменные
Вложенные селекторы
Прототипирование
PHP
От автора
Ссылки

Dynamic CSS classes

The menu needs to be dynamically generated and each page needs to have a unique id or something at the top of the page. When you dynamically generate the menu, insert and if clause that will echo the active class if generated menu item is the same with current page.

I have not coded in php for some time now but i use to do something like this, in each page give a unique file name at the top. For example in the home page:

and then in the included file apply a logic like this:

 else if($file_name == "about.php") < //Your navigation for the about page >?>

Alright so I will give you some tips. First, to know on wihch page of your website you are you can use in PHP a superglobal called $SERVER with this attribute : $_SERVER[‘REQUEST_URI’] .

By calling this, PHP is going to return the parts of the url after your domain.com. For example, if the current url was domain.com/home, echo will return only ‘/home’.

Then, you can place your logic about highlighting your links :

if($_SERVER['REQUEST_URI' == '/home') < //Add active class to the link HOME >.

Arrabidas92 1075

You can try this one, but this is a Jquery, just put the CDN in your file.

$(document).ready(function() < if(window.location.href === "index.php") < $(".bd-nav").addClass("active-bgRed"); >else if(window.location.href === "about.php") < $(".bd-nav").addClass("active-bgBlue"); >else if(window.location.href === "contact.php") < $(".bd-nav").addClass("active-bgGreen"); >>); // CSS .active-bgRed < background-color: red; >.active-bgBlue < background-color: blue; >.active-bgGreen < background-color: green; >// JQuery CDN

Myco Claro 465

Динамический CSS?

Я давно ждал этого момента, нет честно, где-то в подкорке я очень-очень хотел такой штуки чтобы было удобно писать на CSS без переписывания похожих стилей по два раза, без выыскивания нужных разделов в собственном коде, в общем хотелось чтобы на CSS можно было работать легко и просто, что-то я затянул…И так встречайте xCSS — php-класс для работы с динамическим CSS.
Заранее прошу прощения за вёрстку что-то у нас с Хабром в этот раз не заладилось (
Как я уже писал выше, xCSS — это класс для работы с динамическим CSS. Автор вдохновлённый идеей OO CSS и SASS (да-да, для Ruby уже есть такая штука) создал класс, который позволяет работать с CSS динамически: разработчику доступны переменные, классы, вложенные селекторы и прототипирование.
Что же даёт нам xCSS при первом рассмотрении? Во-первых, позволяет избежать путаницы в коде с помощью вложенных селекторов, во-вторых, позволяет избавиться от необходимости править всю таблицу стилей, если понадобилось поменять какие-то значения, в-третьих, сократить количество кода избавившись от повторяющихся правил, в-четвёртых, минимизировать код. Плюсы на лицо, теперь давайте познакомимся с xCSS поближе.

Переменные

Об этом новшестве мне хочется написать первым делом, все мы часто сталкивались с ситуацией когда нужно поменять цвет в макете, а всё уже почти готово, а поиск и замена не подходят потому что цвет нужно менять не везде, а только у определённых элементов или когда перед сдачей в продакшн необходимо вычистить все отладочные правила, а их много… Уф. Даже перечислять не хочется ситуаций когда требуется что-то быстро изменить, чтобы поменялось там где нужно, а там где не нужно — нет!
Теперь можно использовать переменные:

В примере я ставлю подчёркивание в конце переменных, это нужно для того чтобы необъявленные переменные не заменялись на переменные с общим префиксом. Проиллюстрирую выше сказанное: $newColor = #ffcc00 , а $newColorBg не объявлен, но используется в коде, в результате от $newColorBg останется #ffcc00Bg .
Строки в переменных можно не экранировать, они закрываются семиколоном (точкой с запятой).

Вложенные селекторы

Предположим есть у вас элемент товар и у него есть много вложенных элементов, которые требуют отдельного оформления: цена, описание, кнопка купить, номер модели и прочее. И конечно же теперь придётся писать сто раз подряд li.product тра-та-та… теперь всё проще:

li.poduct < a < color: $basicColor; >.price < color: $priceColor; font-size: 2em; >.buy < background-color: $attentionColor; >// … и т.д. И т.п. >

li.product a < color: $basicColor; >li.product .price < color: $priceColor; font-size: 2em; >li.product .buy < background-color: $attentionColor; >// … и т.д. И т.п.

Прототипирование

Возьмём три товара обладающих идентичным расположением элементов, но разными цветовыми схемами, например, обычный товар, бест-селлер и новинка. Сначала мы создадим прототип для обычного товара:

.product < self < min-width: 200px; min-height: 300px; >h1 < padding-bottom: 1em; color: $headersLight; >> .bestSeller extends .product < self < background-color: $productBestBg_; >h1 < color: $productBest_; >> .new extends .product < self < background-color: $productNewBg_; background-image: url($path/new_bg.png); >h1 < color: $productNew_; font-size: 1.2em; padding-bottom: 1.8em; >>

.new, .bestSeller, .product < min-width: 200px; min-height: 300px; >.new h1, .bestSeller h1, .product h1 < padding-bottom: 1em; color: $headersLight; >.new h1 < color: #00ffcc; font-size: 1.2em; padding-bottom: 1.8em; >.new < background-color: #0000cc; background-image: url(/storage/images/new_bg.png); >.bestSeller < background-color: #ff33cc; >.bestSeller h1

Как видите при использовании xCSS мы избежали дублирования имён классов (кроме имени прототипа) и при смене имени класса нам

PHP

Кидаем файл xcss-class.php в библиотеку.
В папке с xCSS-файлами создаём скрипт index.php и вставляем туда код:

$config = array(); $config['path_to_css_dir'] = '../'; // это рут для css и xcss директорий $config['xCSS_files'] = array ( 'styles/main.xcss' => 'generated/main.css', // имя файла xcss => сохранить как ); $config['master_file'] = true; // Использоват мастер-файл (файл в который будут включены все стили), по умолчанию true $config['master_filename'] = 'master.css'; // соответственно имя мастер-файла, по умолчанию 'master.css' $config['reset_files'] = array ( 'static/reset.css', // Стили сбрасывающие дефолтные настройки браузеров ); $config['hook_files'] = array ( 'static/hooks.css: screen', // Файлы для других медиа-типов (могу ошибаться) ); $config['construct_name'] = 'self'; // Имя элемента внутри себя, по умолчанию 'self' $config['compress'] = true; // Удалять лишние пробелы, по умолчанию false $config['debugmode'] = false; // Включает режим отладки, по умолчанию false $config['disable_xCSS'] = false; // Отключает xCSS, по умолчанию false $xCSS = new xCSS($config); $xCSS->compile();

От автора

Конечно я не использовал бы xCSS так как предлагает автор, а склеил бы все необходимые стили в один файл, сжал gzip’ом и закинул в кэш, а xCSS использовал бы только при разработке.
Спасибо за внимание!

Ссылки

Источник

Читайте также: Gradle kotlin dsl script