Как включить все CSS, хранящиеся в каталоге?

Question

Можно ли включить несколько CSS одновременно в HTML? Или, если быть точным, возможно ли за один раз включить все CSS, помещенные в каталог? как в настоящее время, что мы делаем: -

<link type="text/css" rel="stylesheet" href="./tabs_css/navigation.css">

мне нужно что-то вроде: -

<link type="text/css" rel="stylesheet" href="./tabs_css/*.css">

Возможно ли это? или есть альтернатива этому?

Answer 1

Вы можете создать главную таблицу стилей, которую вы включаете в каждую страницу, и в этом CSS-файле вы можете использовать @import для включения других.

Это не решает проблему необходимости вручную включать каждый отдельный файл CSS, но, по крайней мере, он инкапсулирует его в главную таблицу стилей, поэтому вам не нужно повторять все ссылки в каждом файле HTML. Если вы добавите дополнительные файлы CSS, вам нужно будет только добавить ссылку в мастер CSS, и все страницы получат к ней доступ.

Пример HTML-справки по CSS:

<link href="master.css" type="text/css" />

Пример Master CSS (master.css):

@import url(style1.css);
@import url(style2.css);
@import url(style3.css);

Подробнее о , когда использовать @import и его совместимости со старыми браузерами .

Answer 2

Вы должны сделать это на стороне сервера. Если вы используете PHP, взгляните на glob .

Например:

foreach (glob("path/to/css/*.css") as $css) {
    echo "<link type='text/css' rel='stylesheet' href='$css'>\n";
}

Answer 3

Нет, нельзя использовать подстановочные знаки в href. Вам нужно будет указать тег ссылки для каждого файла CSS, который нужно включить.

Answer 4

Возможны обходные пути:

• Рассмотрим идею импорта страницы PHP (например, ./tabs_css/allcss.php), которая объединяет и возвращает все CSS в каталоге. Это может быть немного интенсивно ЦП.

• Подумайте о создании комбинированного CSS-файла, который объединяет все ваши CSS-файлы. Это можно создать автоматически, добавив специальные хуки в вашу систему контроля версий.

Answer 5

Вы можете использовать php для вывода списка всех файлов с расширением css в этом каталоге ...

$fp = opendir($dir);
while ($file = readdir($fp)) {
        if (strpos($file, '.css',1))
            $results[] = $file;
    }
closedir($fp);

... и что делает конструкция foreach для включения

CSS

Answer 6

Невозможно сделать это на стороне клиента. Это можно сделать с помощью серверной технологии. Но лучшим подходом было бы объединить весь CSS в один файл и включить его.
Если вы все еще хотите разделить css на файлы, делайте то, что делают многие, и используйте инструмент сборки, который объединяет все css в один файл только для производственного / тестового сервера

Answer 7

Вы можете написать скрипт на стороне сервера, который объединит все файлы в каталоге и отправит его клиенту, а затем поместит скрипт в тег <link>.

Однако остерегайтесь синтаксических ошибок.