Web Мастерская
Контакт

Web Мастерская»Блог

Сообщество Web Мастеров. Тут собрано всё, чтобы написать свой первый сайт, запустить его в Интернет и поддерживать его в течении всей его работы.
Поиск блогов...

CSS переменные в SVG

CSS SVG
На данный момент работаю с SVG. Практически в каждом теге есть код цвета. В основном использую одни и те же цвета, пока их всего пять. Думаю, что в будущем цвет буду менять, придётся копаться в нескольких файлах, производить замену. Тут задумался - а ведь проще написать переменные и использовать их, в будущем не придётся рыться в нескольких файлах, а отредактировать всего один. Так я и сделал, я добавил переменные в SVG. Сейчас расскажу, как я это сделал.

Я создал файл: "svg.css", с таким содержимым: 
:root {
	--cool:   #0074FF; /* Оттенок синего */
	--murk:   #033C59; /* Оттенок синего + зелёного */
	--spring: #48CFAD; /* Оттенок зелёного */
	--smoke:  #CCD3EB; /* Оттенок серого */
	--fire:   #FC6459; /* Оттенок красного */
}

Подключил "svg.css" к документу. Теперь в SVG меняю: 
<g fill="#0074FF">

На: 
<g fill="var(--cool)">

Готово. Переменная отдаёт указанный ей код цвета.

CSS переменная должна начинаться с двойного дефиса (--)....

Как выводить SVG иконки из отдельного файла (Подключение файла SVG)

SVG
Необходимо создать файл, где будут храниться у нас все спрайты SVG, назовём данный файл sprite.svg, с таким содержимым: 
<svg xmlns="http://www.w3.org/2000/svg">
	<symbol id="sprite1" viewBox="0 0 64 64">
		<!-- Код спрайта id="sprite1" -->
	</symbol>

	<symbol id="sprite2" viewBox="0 0 64 64">
		<!-- Код спрайта id="sprite2" -->
	</symbol>
</svg>

Тут внутри тега <svg> находятся два спрайта, "завёрнутые" в тег <symbol> с id="sprite1" и id="sprite2". По этим идентификаторам мы и будем выводить на экран наши спрайты, а поможет нам в этом тег <use>. Для вывода первого спрайта (sprite1), в нужном нам месте делаем так: 
<svg>
	<use xlink:href="sprite.svg#sprite1"></use>
</svg>

И, разумеется, для вывода второго спрайта (sprite2), делаем так: 
<svg>
	<use xlink:href="sprite.svg#sprite2"></use>
</svg>

Для изменения стилей спрайтов, например, размеров, можете добавлять атрибут class в тег <svg>: 
<svg class="nameClass">
	<use xlink:href="sprite.svg#sprite1"></use>
</svg>

.nameClass {
...

jQuery: Как проверить блок на пустоту

Библиотека JS
Появилась необходимость проверить блок на пустоту, то есть есть ли в нём какие либо теги или нет. Ниже, как это можно сделать.

Допустим есть у нас такой блок (Без тегов внутри него): 
<div id="blockID"></div>

Его та нам и надо проверить. Для этого используем следующее условие: 
if ($('#blockID').html().trim() == '') {
	// Блок пустой | Действие при пустом блоке
}

ID или другой атрибут блока (blockID) пишите свой....

MySQL: Как произвести замену строки по всей таблице

MySQL
Потребовалось мне произвести замену строки size:: на size:, сразу во всех записях, в поле text, таблицы comment. В чём мне помог запрос ниже: 
UPDATE `comment`
SET `text` = replace(`text`, 'size::', 'size:');

Одно мгновение и замена произведена, во всех записях сразу.

Если надо заменить сразу несколько строк/подстрок, можно делать так: 
UPDATE `comment` SET `text` = replace(`text`, '[size:1]', '[title]');
UPDATE `comment` SET `text` = replace(`text`, '[size:2]', '[title]');
UPDATE `comment` SET `text` = replace(`text`, '[size:3]', '[title]');
UPDATE `comment` SET `text` = replace(`text`, '[/size]', '[/title]');
...

jQuery: проверка наличие элемента в массиве

Библиотека JS
Для проверки элемента в массиве в библиотеку jQuery добавлена функция jQuery.inArray(): 
if (jQuery.inArray('js', ['js', 'jQuery']) > -1) {
    // Элемент существует в массиве
};

Вместо: jQuery.inArray можно писать: $.inArray....
Реклама