| Rasy | 27.09.2017 12:10 |
Цитата:
|
Сообщение от Rise
Это лишь фантазия автора статьи ничем необоснованная
|
Белый шум,
это, это :)
Поместить блочный элемент в инлайн?
Всем здравствуйте!
Такое вот задание "Оберните все <h2> в один <i>.", данную операцию предлагают сделать с помощью wrapAll. Все бы ничего, но ведь <i> это инлайн элемент и он не может оборачивать блочные, коем является <h2>. Объясните, пожалуйста, в чем я не прав, может я упустил какие-нибудь нюансы, или вновь моя невнимательность меня подводит? |
plug-ugly,
не вижу препятствий |
Раньше так не рекомендовали делать, но в html5 все изменилось и теперь официально поощряется. Ну не то, чтобы поощряется, но это нормально.
|
Понятно, спасибо.
|
Если это экзамен, то напоминает экзамен по вождению, когда мент говорит: "Припаркуйтесь вот тут", а там знак, парковка запрещена :stop: :(
|
Цитата:
|
Да, фразовые элементы не должны содержать заголовки, элементы управляющие потоком документа. Это грубая ошибка. Обратимся к спеке - phrasing-content-2
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
Проще обернуть весь блок в <a> и задать одну ссылку на товар, если дизайн требует кликабельности целого блока. Атрибут onclick и другие решения с js неудобны. Цитата:
http://html5doctor.com/block-level-links-in-html-5/ |
Цитата:
?? |
Цитата:
Белый шум, это, это :) |
|
лолчто? В примере стандарта - не серьёзно? %))
Ну вот ещё прямым текстом - Цитата:
|
Цитата:
В самой статье есть пруф (see WCAG 2) Цитата:
Using a link to wrap block level elements in HTML5. |
Rise,
разрешено теперь, то есть не считается ошибкой. Спор ни о чем. ;) |
Цитата:
P.S.: да, стандарты читать сложно, поэтому это делают редко )) |
Rise,
Там это где? А то я уже запутался. Цитата:
|
Rise,
Ты просто чванишься тут задействовав весь спектр эмоций.:) Трактуешь что-то нелогичное и несвязанное. Это же надо такой бред нести. :lol: Цитата:
|
Белый шум,
Не трать больше энергии. Он сам ничего не понимает. Возможно, даже где находится. Я предупреждал... |
Прям настроение поднялось.:D
<iframe src="//coub.com/embed/4jz7o6f?muted=false&autostart=false&originalSize=false&startWithHD=false" allowfullscreen="true" frameborder="0" width="634" height="480"></iframe> |
Цитата:
Цитата:
|
Райс это для ссылок, спаном нельзя блочные заворачивать.
|
Ссылкой можно блок обернуть, код будет валидный.
Спаном нельзя блок обернуть, код будет не валидный. так можно <a href="/"> <h1>Header</h1> </a> а так нет <span> <h1>Header</h1> </span> родители не причем |
Rise,
Да, написали мудрёно, но это для обобщения - видимо там есть и другие транспарентные элементы, не только a. |
Райс если дело в родителе, почему ниже код валидный??
ins родитель а и это инлайновый элемент <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> <ins> <a href="#"> <h1>Header</h1> </a> </ins> </div> </body> </html> |
<ins>Текст</ins> <div>Текст</div> <a href="">Текст</a> Чем ins прозрачнее div-a или ссылки?? они не могут содержать своего контента?? вот не прозрачный тоже валидный <ins>текст <a href="#"> <h1>Header</h1> </a> </ins> |
j0hnik,
Речь про: Цитата:
, а не какую-то иную прозрачность :) |
Белый шум,
понятно, все эти элементы для которых исключения транспарентные a, ins, del, object, video, audio, map, noscript, slot, canvas, custom element которые перечислил Райс. ими же можно оборачивать блоки вот только зачем такое сложное объяснение, если можно сказать проще: Инлайновые элементы не должны внутри себя содержать блочные исключения составляют a, ins, del, object, video, audio, map, noscript, slot, canvas, custom element. вот и все объяснение. просто опять появляются исключения <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <a href="#"> <h1>Header</h1> </a> </body> </html> боди не блочный и не транспарентый, а код валидный :-? |
j0hnik,
в стандарте не сказано, что родитель транспарентных элементов может быть только блочным. Там сказано, что он принимает ту же контентную модель, что и родитель. Т.е. если <h1> может быть потомком <body>, то он может быть и потомком <body><a> - никакого исключения тут нет. |
Цитата:
Шум, спасибо за разъяснения! |
:-?
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$("h2").wrapAll("<i>")
});
</script>
</head>
<body>
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
<h2>5</h2>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$("h2").wrapInner("<i>")
});
</script>
</head>
<body>
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
<h2>5</h2>
</body>
</html>
|
Ну, браузеры всегда относились лояльно к ошибкам стандарта на сайтах...
Тут ещё такой вопрос - контентная модель (еяпп) описывает только разрешение отношений предок-потомок, а не блочную модель: Цитата:
Т.е. такой код разрешён: <div> Каждый <a href="#">охотник</a> желает знать где <ins>сидит</ins> фазан </div>Но ссылка при этом не станет блочной (хотя она внутри <div>) - т.е. браузер не поместит слово "охотник" в отдельный блок с шириной 100% (как если бы существовал стиль: "div>a, div>ins { display:block; }"). Но где в стандарте html5 описывается блочная модель элемента - я что-то не вижу... |
https://www.w3.org/TR/html5/ - официальная верси w3c
http://w3c.github.io/html/ - последняя рабочая версия Цитата:
|
| Часовой пояс GMT +3, время: 04:57. |