@ документ
Хотя технически он не является родительским селектором, он будет позволять вам выбирать URL страницы, который является "родительским" по мере поступления. Пожалуйста, имейте в виду, что вам нужно будет отстаивать это (см. Нижнюю часть этого поста для дальнейших инструкций). Я обновлю этот пост, как только этот метод станет жизнеспособным для веб-авторов.
Допустим, вы хотите изменить background-image навигационного заголовка для каждой страницы. Ваш HTML обычно будет выглядеть следующим образом:
<body>
<main id="about_"></main>
<header><nav></nav></header>
</body>
Добавление атрибута id к элементам head и body не является профессиональным и несовместимым с Web 3.0. Однако, выбрав URL , вам не нужно добавлять какой-либо HTML-код:
@document url('https://www.example.com/about/')
{
body > header
{
background-image: url(about.png);
}
}
Поскольку вы являетесь профессионалом (не так ли?), Вы всегда тестируете свой код локально перед его развертыванием на работающем сервере. Таким образом, статические URL не будут работать на localhost, 127.0.0.1, :1 и т. Д. - по умолчанию . Это означает, что если вы собираетесь успешно протестировать и проверить свой код, который вам понадобится для запуска серверных сценариев на вашем CSS. Это также подразумевает, что, если вы разрешаете пользователям запускать CSS на вашем сайте, вы должны обеспечить, чтобы их код CSS не мог запускать скрипты на стороне сервера, хотя ваш может. Большинство людей, которые сочли бы эту часть сообщения полезной, могут не знать, как к ней подойти, и все сводится к тому, как вы организуете свою рабочую среду.
- Всегда запускайте локальную среду на RAID 1, 5, 6, 1 + 0 или 0 + 1 (обычно ошибочно принимают за несуществующий «RAID 10», а 0 + 1 и 1 + 0 очень разные звери).
- Не храните свои работы ( и личные файлы) на том же диске, что и ваша ОС; вы будете переформатировать со временем, в настроении вы или нет.
- Ваш корневой путь должен выглядеть примерно так (на сервере WAMP (Windows, Apache, MariaDB и PHP)):
D:\Web\Version 3.2\www.example.com\.
- В PHP вы начнете с
$_SERVER['DOCUMENT_ROOT'] (вы можете определить ОС Linux с помощью условия if (substr($_SERVER['DOCUMENT_ROOT'],0,1) == '/') {}).
- Вы сохраняете копии старых версий, потому что вам нужны рабочие копии на случай, если вы что-то забыли и напортачили, отсюда и версия.
Следующее предполагает, что ваш действующий сервер использует www. (https://www.example.com/ вместо https://example.com/):
<?php
if (!isset($_SERVER['HTTP_HOST']))
{
//Client does not know what domain they are requesting, return HTTP 400.
}
else
{
//Get the domain name.
if (substr($_SERVER['HTTP_HOST'],0,4) === 'www.')
{//Live Server
$p0 = explode('www.',$_SERVER['HTTP_HOST'],2);
$domain = $p0[1];
}
else
{//localhost
$p0 = explode('www.',$_SERVER['REQUEST_URI']);
if (isset($p0[2]))
{
$p1 = explode('/',$p0[2],2);
$domain = $p1[0];
}
else
{
$p1 = explode('/',$p0[1],2);
$domain = $p1[0];
}
}
//Now reconstruct your *relative* URL.
if (isset($_SERVER['HTTPS'])) {$https = 'https';}
else {$https = 'http';}
$p0 = explode('www.',$_SERVER['HTTP_HOST']);
if (stristr($_SERVER['HTTP_HOST'],'www.'))
{
$a = array('p1'=>$https.'://www.'.$domain, 'p2'=>'/');
}
else
{
$dir_ver = explode('/www.',$_SERVER['REQUEST_URI']);
if ($_SERVER['HTTP_HOST']=='localhost' || $_SERVER['HTTP_HOST']==$_SERVER['SERVER_NAME'])
{
$p0 = explode($domain,$_SERVER['REQUEST_URI']);
$a = array('p1'=>$https.'://'.$_SERVER['HTTP_HOST'], 'p2'=>htmlspecialchars($p0[0].$domain).'/');
}
else if (substr($_SERVER['HTTP_HOST'],0,7)=='192.168' || substr($_SERVER['HTTP_HOST'],0,4)=='127.')
{
$p0 = explode($domain,$_SERVER['REQUEST_URI']);
$a = array('p1'=>$https.'://'.$_SERVER['HTTP_HOST'], 'p2'=>htmlspecialchars($p0[0].$domain).'/');
}
}
print_r($a);
}
?>
$a вернет две части вашего URL. Корневой URL вашей главной страницы или веб-сайта будет /, поэтому примерно / будет about/ после того, как вы explode или split при сравнении строк. Это даст вам около 80% пути (как для локального, так и для живого тестирования), так что вы сможете запустить один и тот же код в обеих средах и использовать его в CSS для восстановления URL-адресов.
Поддержка браузера
Начиная с 2019 года только Gecko 61+ поддерживает эту функцию и только за флагом. Я уже защищал, что это становится пригодным для использования веб-авторами. Дэвид Барон является автором модуля условных правил CSS уровня 3 . Основная причина, по которой фактический CSS «родительский селектор» не существует, заключается в влиянии на производительность; этот метод сведет на нет влияние на производительность. Я также выступал за то, чтобы относительные URL-адреса поддерживались при наличии элемента HTML base. Если вы читаете это в 2019 году или вскоре после него (привет всем в 47 632 году!), Пожалуйста, first со ссылкой на следующие URL: