Как включать всю CSS, сохраненную в каталог?
Действительно ли возможно включать несколько CSS сразу в HTML? Или быть точным, действительно ли возможно включать всю CSS, помещенную в каталог, сразу?
как в настоящее время то, что мы делаем, является:-
<link type="text/css" rel="stylesheet" href="./tabs_css/navigation.css">
мне нужно что-то как:-
<link type="text/css" rel="stylesheet" href="./tabs_css/*.css">
Действительно ли это возможно? или есть ли какая-либо альтернатива для этого?
7 ответов
Вы можете создать основную таблицу стилей, которую вы включаете на каждую страницу, а в этот файл css можете использовать @import для включения остальных.
Это не решает проблему включения каждого отдельного файла CSS вручную, но, по крайней мере, инкапсулирует его в главную таблицу стилей, поэтому вам не нужно повторять все ссылки в каждом файле HTML. Если вы добавите дополнительные файлы CSS, вам нужно будет только добавить ссылку в мастер CSS, и все страницы получат к нему доступ.
Пример HTML CSS Ссылка:
<link href="master.css" type="text/css" />
Пример основного CSS (master.css):
@import url(style1.css);
@import url(style2.css);
@import url(style3.css);
Подробнее о , когда использовать @import и его совместимости со старыми браузерами .
Вы можете написать сценарий на стороне сервера, который объединяет все файлы в каталоге и отправляет их клиенту, а затем помещает сценарий в тег.
Однако остерегайтесь синтаксических ошибок.
Нет, использовать подстановочные знаки в href невозможно. Вам нужно будет указать тег ссылки для каждого файла css, который вам нужно включить.
Вам нужно сделать это на стороне сервера. Если вы используете PHP, посмотрите glob .
Например:
foreach (glob("path/to/css/*.css") as $css) {
echo "<link type='text/css' rel='stylesheet' href='$css'>\n";
}
Это невозможно сделать на стороне клиента. Это возможно сделать с помощью технологии на стороне сервера. Но лучшим подходом будет объединить все CSS в один файл и включить его.
Если вы все еще хотите держать css разделенным на файлы, сделайте то, что делают многие, и используйте инструмент сборки, который включает весь css в один файл только для производственного/тестового сервера
вы можете использовать php для вывода списка всех файлов с расширением css в этом каталоге ...
$fp = opendir($dir);
while ($file = readdir($fp)) {
if (strpos($file, '.css',1))
$results[] = $file;
}
closedir($fp);
... а затем сделать конструкцию foreach для включения css
Возможны некоторые обходные пути:
Рассмотрим идею импорта страницы PHP (например, ./tabs_css/allcss.php), которая объединяет и возвращает все css в каталоге. Это может потребовать небольшой нагрузки на ЦП.
Рассмотрите возможность создания комбинированного CSS-файла, который объединяет все ваши CSS-файлы. Это можно было бы создать автоматически, добавив специальные хуки в вашу систему контроля версий.