Jump to content

Input, button, select, textarea — замещаемые элементы?


SelenIT
 Share

Recommended Posts

Время от времени возникает вопрос "что относится к замещаемым (replaced) элементам" (и относится ли к ним то-то и то-то). Когда-то я даже пытался подкопаться к теме поглубже, но концов так и не нашел. На сайтпойнте пишут одно (что является), однако из спеки ЖHTML (где все замещаемые вроде бы перечислены явно), кажется, вытекает, что не являются (или я не там смотрю?). Да и по объяснению из спеки CSS ("The content of replaced elements is not considered in the CSS rendering model.") вроде как баттон и текстария, как минимум, в замещанцы не проходят: их контент ведь явно слушается свойств шрифта и всяких паддингов-бордеров, ведя себя как почти полноценные инлайн-блоки, т.е. вполне интересует модель рендеринга CSS... или я заблуждаюсь?

Пожалуйста, помогите наконец распутаться окончательно и поставить точку в расследовании! :)

Link to comment
Share on other sites

Ладно, это шутка юмора была. Если серьезно, то таких элементов походу нет, в своем Хроме я могу через CSS повлиять вообще на любой элемент, хотя бы через -webkit-appearance.

UPD: Может embed-элементы? Тот же flash?

Link to comment
Share on other sites

Я понял спеку так, что речь не о самом элементе, а о контенте элемента. И тут уже возможны варианты: размеры "контента" картинки или видео CSS-у и впрямь неподвластны (только размеры самого элемента, что "неспортивно"), то размеры контента <button> вполне ему поддаются (через font-size и т.п., как любой текст). Поэтому первые, скорее всего, замещаемые, а последний, скорее всего, нет (и с ЖHTML это неплохо стыкуется). Но как быть, скажем, с чекбоксом/радиобаттоном - они же тоже "вещь в себе", по всем признакам?

Link to comment
Share on other sites

хорошо, хоть предсказуемым контролом :) В закинутой мною сегодня на обсуждение работе есть и оформление input type=file. Сделано без js, строго полагаясь на предсказуемость штатного контрола и возможность управлять размером шрифта.

Link to comment
Share on other sites

From the point of view of the CSS spec, it's a replaced element.

In browsers, it's implemented in a variety of ways. Gecko makes it a replaced element whose innards are rendered via anonymous content and CSS, for example.

Я помнил, что это таки replaced элементы, но проверить не мешало.

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

SelenIT, спасибо за тему!

Прочитала про замещаемые элементы на whatwg.org (на w3.org то же самое).

Исходя из документации (ссылаясь на вышеуказанные в этом посте ссылки), есть замещаемые элементы, которые идут отдельным пунктом (10.4 Replaced Elements), а "связанные" (не уверена, что правильно перевела bindings) элементы идут под другим пунктом (10.5 Bindings). Есть также Frames and framesets, Non-replaced elements и прочее.

У меня возник следующий вопрос.

Получается, что с точки зрения HTML, bindings и replaced - абсолютно разные вещи, а с точки зрения CSS (если ссылаться на перечень примеров замещаемых элементов из рекомендации CSS2) - часть (или все из них) замещаемые?

Другими словами, означает ли данное расхождение в группировке элементов вкладывание различного смысла в термин "replaced element" в зависимости от контекста ('replace elements HTML' vs 'replaced elements CSS')? Или разбивка на пункты одного уровня в данном случае не означает разделения на группы элементов? Или информацию из рекомендации CSS2 касательно замещаемых элементов можно считать устаревшей?

Подскажите, пожалуйста, как однозначно определить замещаемый элемент с точки зрения CSS. Например, как определить: <details>, </marquee> - это замещаемые элементы или нет?

Понимаю, что с момента последнего поста прошло уже больше года, но буду благодарна, если кто-нибудь поможет мне окончательно разобраться в немного запутанном для меня вопросе. Может, что-то изменилось за это время?

Спасибо!

  • Like 1
Link to comment
Share on other sites

Получается, что с точки зрения HTML, bindings и replaced - абсолютно разные вещи, а с точки зрения CSS (если ссылаться на перечень примеров замещаемых элементов из рекомендации CSS2) - часть (или все из них) замещаемые?

bindings - функциональное поведение

replaced - визуальное

Input'ы обычно являются замещаемыми элементами, но, кроме визуального поведения, имеют еще и функциональное.

Подскажите, пожалуйста, как однозначно определить замещаемый элемент с точки зрения CSS. Например, как определить: <details>, </marquee> - это замещаемые элементы или нет?

Все, чей контент может генерироваться в процессе отображения или существования страницы при помощи специализированных алгоритмов - замещаемые элементы. Т.е. это некая область, контент которой наполняется по своей собственной логике.

  • Like 2
Link to comment
Share on other sites

Sorrow, спасибо!

bindings - функциональное поведение replaced - визуальное

В документации 'replaced', 'non-replaced', 'bindings', 'Frames and framesets' идут разными разделами. Это всё разделение по поведению?

input (насколько я понимаю, всех типов) - замещаемый элемент, но он в разделе bindings. img - замещаемый, но в разделе replaced elements. Означает ли это, что и в других разделах (теоретически) также могут находиться замещаемые элементы?

Все, чей контент может генерироваться в процессе отображения или существования страницы при помощи специализированных алгоритмов - замещаемые элементы. Т.е. это некая область, контент которой наполняется по своей собственной логике.

Получается, что на данный момент нет формального документа с полным списком замещаемых элементов, на который можно было бы сослаться в случае затруднений, вызванных при попытке однозначного определения замещаемый элемент Х или нет?

Link to comment
Share on other sites

Получается, что с точки зрения HTML, bindings и replaced - абсолютно разные вещи, а с точки зрения CSS (если ссылаться на перечень примеров замещаемых элементов из рекомендации CSS2) - часть (или все из них) замещаемые?

Имхо, как-то примерно так. Я понимаю так, что для CSS важно лишь то, что рендеринг элемента определяется не только CSSовской же визуальной моделью, но и чем-то еще (напр. какой-то «магией» из недр UI самого браузера или внутренними свойствами стороннего объекта типа картинки). А для HTML тут принципиальная разница в поведении — если для отрисовки системного контрола, грубо говоря, достаточно обратиться к методам этого самого браузерного UI, то для отрисовки внешнего ресурса нужно сперва его запросить, а это уже нетривиальные, к тому же асинхронные, танцы в HTTP (особенно в свете последних нововведений с адаптивными картинками)...

Получается, что на данный момент нет формального документа с полным списком замещаемых элементов, на который можно было бы сослаться в случае затруднений, вызванных при попытке однозначного определения замещаемый элемент Х или нет?

Насколько я понимаю, на уровне спецификаций — нет. Но могу (и хочу :)) здесь ошибаться.

  • Like 1
Link to comment
Share on other sites

В документации 'replaced', 'non-replaced', 'bindings', 'Frames and framesets' идут разными разделами. Это всё разделение по поведению?

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

Получается, что на данный момент нет формального документа с полным списком замещаемых элементов, на который можно было бы сослаться в случае затруднений, вызванных при попытке однозначного определения замещаемый элемент Х или нет?

Такого списка не существует и не может существовать.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Обсуждения

    • Вот тут есть актуальный список бесплатных тестов с сертификацией https://www.classcentral.com/report/free-certificates/ Обратите внимание на HackerRank, там есть тест с сертификацией непосредственно по CSS
    • Нужно сверстать по картинке меню-бар. Не получается сделать вот это поле поиска <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style> .nav {     display: flex;     list-style-type: none;     padding-left: 0;     font-size: 17px;     text-transform: uppercase; } .nav > li > a {     color: #fff;     text-decoration: none; } .nav > li {     padding-left: 29px;     margin-left: 30px; } .header {     display: flex;     background-color: #31485b;     justify-content: space-between;     align-items: center; }   .sidebar {     width: 410px;     display: block;     padding-right: 20px;     margin: auto;     margin-left: 250px; }   ul.nav li a:hover {     background-color: #687c8d;     padding: 17.2px 35px; }   input[type="text"], input[type="search"] {   background-color: #687c8d;   width: 60%;   padding: 8px;   margin: 0 50px }   input[type="search"] {     color: #31485b;     font-style: italic; }     </style> </head> <body>     <div class="header">                 <ul class="nav">                     <li class="s1"><a href="#">Главная</a></li>                     <li><a href="#">Блог</a></li>                     <li><a href="#">Сервисы</a></li>                     <li><a href="#">Онлайн-профессии</a></li>                     <li><a href="#">О сайте</a></li>                 </ul>                                 <div class="sidebar">                     <form method="post" action="#" id="search_form" >                       <input type="search" name="search_field" placeholder="Поиск" />                     </form>                   </div>     </div> </body> </html>  
    • ЭЭ, а почему оно должно удалять? Может стоило повесить событие на эту кнопку и указать, что при это должно происходить?
    • например -R не будет качать указанные файлы если вы знаете список нужных вам файлов, проще их указать или можно написать парсер
    • выкладывайте код в песочнице, так будет проще У вас media подключается до blocks/header, по этому правила из blocks/header перекрывают media сверху вниз в css пишите tag .class ... @media и не будет у вас подобных проблем  
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy