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

  • Обсуждения

    • Вы отучились на бухгалтера или программиста? Почему спрашиваю. Я финансист, бухгалтер. Естественно, в свое время отучился на курсах 1С, но как экономист. Поэтому могу помочь с развитием именно в этом направлении, так как опыт огромный. 
    • Всем привет.Не так давно начал изучать верстку.И кароче захотел создать слайдер на основе html css без js. Застрял булеты работают и стрелки также но только стрелки становяться видимы когда первый раз нажал на булет.До этого их никак немогу настроить.   <!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>         .wrapper{             width: 700px;             height: 400px;             margin:0 auto;             border:5px solid green;             border-radius: 20px;             overflow: hidden;             position: relative;         }         .container{             width: 600px;             height: 300px;             border: 5px solid green;             border-radius: 20px;             margin: 20px auto;         }         .slider__items{             display: none;         }         .bullets{             display: flex;             position: absolute;             left:100px;             bottom:30px;         }         .bullets__items{             width: 50px;             height: 15px;             border:2px solid green;             border-radius: 20px;             background-color: lightgreen;             margin: 0 20px;         }             .images{             display: flex;         }         .images__items{             width: 600px;             height: 300px;             border-radius: 20px;             margin-right: 55px;         }               .arrows__prev{             background-image: url(./img/next.png);             background-size: contain;             width: 40px;             height: 40px;             position: absolute;             top:150px;             left: 2px;         }         #slide1:checked ~ .images .image1{             margin-left: 0;         }         #slide2:checked ~ .images .image2{             margin-left: -655px;         }         #slide3:checked ~ .images .image3{             margin-left: -1310px;         }         #slide4:checked ~ .images .image4{             margin-left: -1965px;         }         #slide5:checked ~ .images .image5{             margin-left: -2620px;         }         #slide1:checked ~ .arrow__next .img2,         #slide2:checked ~ .arrow__next .img3,         #slide3:checked ~ .arrow__next .img4,         #slide4:checked ~ .arrow__next .img5,         #slide5:checked ~ .arrow__next .img1{             display: block;             background-image: url(./img/next.png);             background-size: contain;             width: 40px;             height: 40px;             position: absolute;             top:150px;             right: 2px;                 }         #slide1:checked ~ .arrow__prev .img5,         #slide2:checked ~ .arrow__prev .img1,         #slide3:checked ~ .arrow__prev .img2,         #slide4:checked ~ .arrow__prev .img3,         #slide5:checked ~ .arrow__prev .img4         {             display: block;             background-image: url(./img/prev.png);             background-size: contain;             width: 40px;             height: 40px;             position: absolute;             top:150px;             left: 2px;                 }     </style> </head> <body>     <div class="wrapper">         <div class="container">             <div class="slider">                 <input type="radio" name="slider" class="slider__items" id="slide1">                 <input type="radio" name="slider" class="slider__items" id="slide2">                 <input type="radio" name="slider" class="slider__items" id="slide3">                 <input type="radio" name="slider" class="slider__items" id="slide4">                 <input type="radio" name="slider" class="slider__items" id="slide5">                                 <div class="bullets">                     <label for="slide1" class="bullets__items"></label>                     <label for="slide2" class="bullets__items"></label>                     <label for="slide3" class="bullets__items"></label>                     <label for="slide4" class="bullets__items"></label>                     <label for="slide5" class="bullets__items"></label>                 </div>                 <div class="arrow__next">                     <label for="slide1" class="arrows__item img1"></label>                     <label for="slide2" class="arrows__item img2"></label>                     <label for="slide3" class="arrows__item img3"></label>                     <label for="slide4" class="arrows__item img4"></label>                     <label for="slide5" class="arrows__item img5"></label>                 </div>                 <div class="arrow__prev">                     <label for="slide1" class="arrows__item img1"></label>                     <label for="slide2" class="arrows__item img2"></label>                     <label for="slide3" class="arrows__item img3"></label>                     <label for="slide4" class="arrows__item img4"></label>                     <label for="slide5" class="arrows__item img5"></label>                 </div>                 <div class="images">                     <img src="./img/1.jpg" alt="" class="images__items image1">                     <img src="./img/2.jpg" alt="" class="images__items image2">                     <img src="./img/3.jpg" alt="" class="images__items image3">                     <img src="./img/4.jpg" alt="" class="images__items image4">                     <img src="./img/5.jpg" alt="" class="images__items image5">                 </div>             </div>         </div>     </div> </body> </html>
    • Актуально, до сих пор актуально. Много кричали, что SEO умирает и умерло. Ничего подобного, СЕО живее всех живых и по-прежнему работает. 
    • Мне нужен такой результат : Не понимаю почему background не применяется вокруг иконок:   Сам код: Html: css: Html: <section class="finish"> <div class="container"> <h2 class="finish_header">По окончании обучения Вы сможете!</h2> <div class="finish_divider"></div> <div class="finish_wrapper"> <finish_item> <div class="finish_round"> <img src="/icons/finish/1 (1).png" alt="" class="finish_icon"> </div> <div class="finish_descr">Создать свой сайт или блог</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/2.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Создать свой сайт или блог</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/3.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Обеспечить ему медленный, но верный рост в ТОП</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/4.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Достигнуть стабильного прироста посетителей</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/5.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Достигнуть стабильного прироста посетителей</div> </finish_item> </div> </div> </section>   Css: .finish .finish_wrapper { margin-top: 41px; display: flex; justify-content: space-between; } .finish .finish_wrapper .finish_item { width: 204px; } .finish .finish_wrapper .finish_item .finish_round { width: 115px; height: 115px; background-color: #b4e2ff; border-radius: 8px; } .finish_descr { font-family: Roboto; font-size: 17px; line-height: 20px; font-weight: 300; color: #efefef; Спасибо!   Уже решил, спасибо! У меня CSS селектор вида:.finish .finish_wrapper .finish_item .finish_roundА должен быть:.finish .finish_wrapper finish_item .finish_roundТ.е. без точки перед finish_item, так как это не класс, а элемент
    • Есть вопрос по макету. (psd) Макет более 80мб. На форуме не выложишь. Где лучче залить файл и выложить ссылку на него? (Гугл диск подойдет?) Может у кого, знающего найдется 10 минут, чтоб ответить на вопрос по верстке?
×
×
  • 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