Форум

voraa · #1 (**permalink**) 23.11.2021, 21:43

Простой пример

<head>
<style>
.text {
	font-size: 18px;
	margin-left: 2em;
}
p {
	margin-bottom:1em;
}
.anchor{
	position: relative;
	scroll-margin-top: 2rem;
}

.anchor::before {
	content: "#" attr(id);
	color: #888;
	font-family: Arial;
	font-size: 0.8em;
	/* font-weight: bold; */
	position: absolute;
	display: block;
	left: -2rem;
	top: -1em;
	padding-right: 0.5em;
}
</style>
</head>
<body>
<div class='text'>
<p>
	Текст Текст Текст Текст Текст Текст Текст Текст <br>
	Текст Текст Текст Текст Текст Текст Текст Текст <br>
	Текст Текст Текст Текст Текст Текст Текст Текст <br>
	Текст Текст Текст Текст Текст Текст Текст Текст <br>
	Текст Текст Текст Текст Текст Текст Текст Текст <br>
</p>	
<h3 id='Zagolovok' class='anchor'> Заголовок </h3>

<p>
	Текст Текст Текст Текст Текст Текст Текст Текст <br>
	Текст Текст Текст Текст Текст Текст Текст Текст <br>
	Текст Текст Текст Текст Текст Текст Текст Текст <br>
	Текст Текст Текст Текст Текст Текст Текст Текст <br>
	Текст Текст Текст Текст Текст Текст Текст Текст <br>
	Текст Текст Текст Текст Текст Текст Текст Текст <br>
	Текст Текст Текст Текст Текст Текст Текст Текст <br>
	Текст Текст Текст Текст Текст Текст Текст Текст <br>
	Текст Текст Текст Текст Текст Текст Текст Текст <br>
	Текст Текст Текст Текст Текст Текст Текст Текст <br>
</p>
</div>
</body>

Очень надо выделить '#Zagolovok'
Как быть то?

voraa · #2 (**permalink**) 23.11.2021, 23:04

Оказывается сказано.
Сказано, что User Agent (то бишь браузер) МОЖЕТ позволить выделение псевдоэлементов ::before и ::after.

Раз может позволить, значит может и не позволить.
Вот эти агенты и стараются - не позволяют.

Печалька.

MallSerg · #3 (**permalink**) 23.11.2021, 23:53

Хороший пример логической ошибки.
Когда вывод делается с нарушением 4го закона логики.

Просто ты воспринимаешь '#Zagolovok' как часть страницы которую можно отдельно выделить а на самом деле это стилевое свойство блока "Заголовок". К примеру если бы у блока "Заголовок" было бы стилевое свойство красной тени и желтого фона то так же было бы невозможно выделить только тень и фон что бы скопировать.

voraa · #4 (**permalink**) 24.11.2021, 06:54

Сообщение от MallSerg

Просто ты воспринимаешь '#Zagolovok' как часть страницы которую можно отдельно выделить

Не как часть заголовка, а как просто некий текст.
Это не просто часть заголовка типа тени или подчеркивания. Это элемент (как везде говорится), хотя и псевдо.
Рисунки (img), тоже используются для стилевого оформления, однако их можно и выделить и скопипастить.
Проблема в том, что ни в одном месте разных документаций не сказано, что эти элементы нельзя выделять. Даже в спецификации CSS-2 для псевдоэлементов.
Единственное место нашел - спецификация CSS-4 для свойства user-selеct, где говорится, что UserAgent может позволить устанавливать для них и другие значения, кроме none.

MallSerg · #5 (**permalink**) 24.11.2021, 10:45

элемент === псевдоэлемент ?

voraa · #6 (**permalink**) 24.11.2021, 12:01

Сообщение от MallSerg

элемент === псевдоэлемент ?

Chrome говорит, что ДА

Если посмотреть в средствах разработчика свойства псевдоэлемента, то у него есть такие свойства, как
nodeType = 1
tagName = '::before'
parentElement

Ну и многое другое, свойственное элементу.

MallSerg · #7 (**permalink**) 24.11.2021, 12:26

А почему их называют разными названиями?

voraa · #8 (**permalink**) 24.11.2021, 21:42

Сообщение от MallSerg

А почему их называют разными названиями?

Может быть потому, что он не встроен в DOM и ПОКА недоступен.
ПОКА - потому, что ведутся какие то обсуждения, что бы дать к нему доступ из js. Вроде пока остановились на методе pseudo() для html элементов. Насколько полный набор свойств там будет - не понятно. Пока обсуждают, что должны быть свойства для целей анимации (не знаю, какие это)

Возвращаясь к предыдущей теме.
В одном документе написано, что браузер МОЖЕТ дать возможность выделять.
В другом документе, посвященном свойству content, сказано, что сгенерированное содержимое ДОЛЖНО быть выделяемым, доступным для поиска и речевых технологий.
https://drafts.csswg.org/css-content/#content-property

Слишком много народу все это разрабатывает и между собой согласовать все не могут. А уж с производителями браузеров тем более.

Форум

Справочник

Discord чат

Курсы javascript