WedX - журнал о программировании и компьютерных науках

Используя относительный URL-адрес в файле CSS, в каком месте он находится?

При определении чего-то вроде URL-адреса фонового изображения в файле CSS при использовании относительного URL-адреса, где он относительно? Например:

Предположим, файл /stylesheets/base-styles.css содержит:

div#header { 
    background-image: url('images/header-background.jpg');
}

Если я включу эту таблицу стилей в разные документы с помощью <link ... />, будет ли относительный URL-адрес в файле CSS относительно документа таблицы стилей в /stylesheets/ или относительно текущего документа, который он включен к? Возможные пути вроде:

/item/details.html
/about/index.html
/about/extra/other.html
/index.html
html css
02.06.2009

Ответы:


1

Согласно W3:

Частичные URL-адреса интерпретируются относительно источника таблицы стилей, а не относительно документа.

Поэтому, отвечая на ваш вопрос, он будет относиться к /stylesheets/.

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

02.06.2009
  • похоже, есть исключение из правила: -ms-behavior в IE :( 29.09.2014
  • есть еще одно исключение: когда URL-адрес является значением по умолчанию для настраиваемого свойства. Допустим, вы определяете .banner { background-image: var(--bgimg, url('images/default.jpg')); }, но еще не определили значение для --bgimg. Затем на странице /index.html .banner будет искать /images/default.jpg, а на другой странице /about/index.html .banner будет выглядеть /about/images/default.jpg. очень сломанный ИМО. 16.08.2017
  • Исправление: ошибка значения по умолчанию, указанная выше, исправлена ​​в Chrome v60. 16.08.2017
  • если ваш css находится в пакете, путь действительно не имеет значения. Это не то, что вы думаете, больше нет ничего относительного. 15.03.2018
  • У меня возникли проблемы при использовании свойств: background: var(--primary-color-background) no-repeat center center url("maps.jpg"); Это не работало в IOS и Safari. Только абсолютный путь /resources/maps.jpg работает в Safari вместе со свойством css. 29.11.2018
  • @Tod: Что более подробно вы имеете в виду, когда говорите, что ничто больше не является относительным? (Я по-прежнему использую относительные URL-адреса для постоянного переключения между локальными файлами и удаленным веб-сайтом - я все еще делаю то, что мне больше не следует делать?) 08.12.2020
  • @ChuckKollars Итак, если я использую пакеты C #, а .Net объединяет весь мой CSS в один минифицированный файл, где файл больше не имеет значения. CSS больше нет, он находится в каком-то файле, созданном .NET. Конечно, вы можете определить относительный путь, но отладить легче, если пути всегда относительно хоста. 14.12.2020
  • Пользовательские свойства CSS на самом деле копируют потоки токенов, что означает, что если вы установите, например, background-image: url("path/to/somewhere") и использовать его в другом файле CSS, фактическая строка url("path/to/somewhere") копируется вместо правильной ссылки URL! Подробнее см. github.com/w3c/csswg-drafts/issues/757 - это вызвано упрощенным исходным определением настраиваемых свойств CSS и не может быть исправлено без нарушения существующего использования. Старые реализации MSIE и Safari также использовались для разрешения относительных URL-адресов в соответствии с БАЗОВЫМ URL-адресом HTML-документов вместо БАЗОВОГО URL-адреса файла CSS. 25.05.2021

    • 2

    Это относительно файла CSS.

    02.06.2009

    3

    Это относительно таблицы стилей, но я бы рекомендовал делать URL-адреса относительно вашего URL-адреса:

    div#header { 
  background-image: url(/images/header-background.jpg);
}

    Таким образом, вы можете перемещать файлы без необходимости их рефакторинга в будущем.

    02.06.2009
  • Какая разница в дополнительном / спереди? 12.05.2011
  • Как и в случае с именами путей в командной строке, начало / в начале пути означает, что он указывает на абсолютный ресурс на текущем веб-сервере. 21.05.2011
  • На самом деле есть случай, когда лучше использовать URI относительно файла CSS. В моем случае у меня есть каталог / css /, куда я помещаю все данные CSS. Теперь я хочу протестировать новые функции на веб-сайте в отдельной папке. Трудно тестировать, например, новые фоновые изображения в тестовой папке. Все зависит от ваших потребностей ... 20.05.2014
  • Абсолютные пути затрудняют размещение решения в подпапке домена. Есть ряд причин, по которым вы хотите поддерживать подпапки. Это упрощает тестирование (как упоминал Диего), когда предыдущие версии / предварительные выпуски могут находиться в том же домене, что и prod. Будущие изменения, при которых корпоративные прокси-серверы настраиваются для поддержки единого входа, переноса всех решений в один домен и т. Д. Особенно при использовании SSL можно избежать накладных расходов, связанных с обслуживанием нескольких доменных имен. Для меня эти соображения гораздо важнее, чем просто переместить мой .css-файл. 22.09.2014
  • изображения и тому подобное в любом случае попадает на cdn, так что это идеально 21.04.2017

    • 4

    Для создания модульных таблиц стилей, не зависящих от абсолютного местоположения ресурса, авторы могут использовать относительные URI. Относительные URI (как определено в [RFC3986]) преобразуются в полные URI с использованием базового URI. RFC 3986, раздел 5, определяет нормативный алгоритм для этого процесса. Для таблиц стилей CSS базовым URI является URI таблицы стилей, а не исходный документ.

    Например, предположим следующее правило:

    body { background: url("yellow") }

    находится в таблице стилей, обозначенной URI:

    https://www.example.org/style/basic.css

    Фон ТЕЛА исходного документа будет выложен любым изображением, описанным ресурсом, обозначенным URI.

    https://www.example.org/style/yellow

    Пользовательские агенты могут различаться в том, как они обрабатывают недопустимые URI или URI, которые обозначают недоступные или неприменимые ресурсы.

    Взято из спецификации CSS 2.1.

    02.06.2009

    5

    Для таблиц стилей CSS базовым URI является URI таблицы стилей, а не исходный документ.

    (Что-нибудь еще сломалось бы, ИМНШО)

    02.06.2009

    6

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

    Сопоставленный путь запроса для минифицированного пакета должен быть «/ originalcssfolder / minifiedbundlename», а не просто «minifiedbundlename».

    Другими словами, назовите свои пакеты так, чтобы они имели тот же путь (с /), что и исходная структура папок, таким образом, любые внешние ресурсы, такие как шрифты, изображения, будут отображаться в браузере для исправления URI. Альтернативой является использование абсолютного URL-адреса (ссылки в вашем CSS, но обычно это нежелательно.

    27.01.2015
  • Это сэкономило мне кучу времени! Спасибо. Это должно быть задокументировано подробнее 07.08.2017

    • 7

    Это сработало для меня. добавление двух точек и косой черты.

    body{
    background: url(../images/yourimage.png);
}
    19.06.2018
  • Это будет работать только для страниц, которые находятся на один каталог ниже корня. Для любой страницы на корневом уровне или на два каталога ниже он не удастся. 29.06.2020

    • 8

    Попробуйте использовать:

    body {
  background-attachment: fixed;
  background-image: url(./Images/bg4.jpg);
}

    Images - это папка с изображением, которое вы хотите опубликовать.

    10.08.2015
    Новые материалы
    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
    Для любых предложений по сайту: [email protected]