Почему вы можете стилизовать некоторые элементы HTML с помощью CSS, но не с атрибутами - PullRequest
0 голосов
/ 03 октября 2019

Просматривая документацию w3schools , я натолкнулся на раздел о inline элементах и ​​вопрос, о котором раньше никогда не задумывался. Документы говорят следующее:

Встроенные элементы

Элемент inline не начинается с новой строки и занимает столько ширины, сколько необходимо.

| <a> | <abbr> | <acronym> | <b> | <bdo> | <big> | <br> | <button> | <cite> | <code> | <q> |
--------------------------------------------------------------------------------------------
| <dfn> | <em> | <i> | <img> | <input> | <kbd> | <label> | <map> | <object> | <output>     |
--------------------------------------------------------------------------------------------
| <samp> | <script> | <select> | <small> | <span> | <strong> | <sub> | <sup> | <textarea>  |
--------------------------------------------------------------------------------------------
| <time> | <tt> | <var> |                                                                  |
--------------------------------------------------------------------------------------------

Меня интересует элемент <input>. Далее вниз по странице объясняются все атрибуты, которые получает элемент.
Атрибут height объясняется следующим образом:

Указывает высоту элемента <input> (только для type="image")

Да, я знаю, что атрибут будет игнорироваться в этом коде:

<input type="text" height="500" value="Nothing changed">

Конечно, я бы просто использовал CSS для этого, но почему CSS работает, а атрибут HTML - нет?

input {
  height: 300px;
}
<input type="text" value="I feel so thicc :(">

Поэтому мне интересно, почему это так. Было принято решение, что inline элементы не могут иметь атрибуты height, а другие (не inline) могут. Какой смысл удалять атрибут высоты, если CSS все равно может его стилизовать?

Ответы [ 3 ]

1 голос
/ 03 октября 2019

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

Следующие атрибуты являются общими и могут быть указаны для всех элементов HTML (даже тех, которые не определены в этой спецификации). ) ...

И если вы продолжите чтение, вы обнаружите, что есть определенный атрибут, связанный с некоторыми конкретными элементами. Не существует правила magic , и все четко определено.

Атрибуты width и height для img, iframe, embed, object, video, и, когда их атрибут типа находится в состоянии кнопки изображения, можно указать элементы input, чтобы дать размеры визуального содержимого элементаэлемент (ширина и высота соответственно относительно номинального направления выходного носителя) в пикселях CSS. Атрибуты, если они указаны, должны иметь значения, которые являются действительными неотрицательными целыми числами. ref

Здесь вы можете увидеть, где можно использовать атрибут height. Разница со свойством CSS заключается в том, что он будет указывать измерение, которое браузер должен зарезервировать для этого элемента. Конечно, вы можете изменить его позже с помощью CSS, и если вы его опустите, будет использоваться значение по умолчанию (также определенное в той же спецификации).

Требования к пользовательским агентам: ожидается, что пользовательские агенты будут использовать этиатрибуты как подсказки для рендеринга.

Атрибуты высота / ширина также можно использовать с SVG и Canvas:

Элемент canvas имеет дваатрибуты для управления размером растрового изображения элемента: ширина и высота. Эти атрибуты, если они указаны, должны иметь значения, которые являются действительными неотрицательными целыми числами. Правила для анализа неотрицательных целых чисел должны использоваться для получения их числовых значений. Если атрибут отсутствует или анализ его значения возвращает ошибку, то вместо этого должно использоваться значение по умолчанию. Атрибут width по умолчанию равен 300, а атрибут height по умолчанию равен 150.


Что ж, anwser будет недостаточно, чтобы говорить обо всем, что связано с атрибутом высоты, но в спецификации вы можетенайдите для каждого элемента атрибуты, которые вы можете использовать и как они себя ведут. Отсюда вы можете найти исчерпывающий список элементов, где разрешен атрибут высоты.

Пример:

canvas element


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

0 голосов
/ 03 октября 2019

CSS вещи обычно классифицируются как стиль в HTML. По мере развития HTML линии стилей становились длиннее, и их нужно было копировать для каждого элемента. CSS решил обе эти проблемы.

Так что, если вы не хотите использовать CSS, используйте следующее:

<input type="text" value="I feel so thicc :(" style="height:500px;">
0 голосов
/ 03 октября 2019

(скопировано из w3school)

Определение и использование

Атрибут height указывает высоту элемента.

Примечание: Атрибут высоты используется только с.

Совет. Всегда указывайте атрибуты высоты и ширины для изображений. Если заданы высота и ширина, пространство, необходимое для изображения, резервируется при загрузке страницы. Однако без этих атрибутов браузер не знает размер изображения и не может зарезервировать для него соответствующее пространство. В результате макет страницы будет меняться во время загрузки (пока загружаются изображения).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...