Сегодня столкнулся с неприятным обновлением в Chrome и Firefox. Имеем следующий код HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="b-f-container">
<label for="text" class="b-f-label">Label for form element</label>
<textarea name="textarea" id="text" cols="30" rows="10" class="b-f-text"></textarea>
</div>
</body>
</html>
И содержимое CSS:
.b-f-container {
width: 80%;
margin: auto;
}
.b-f-text {
width: 100%;
max-width: 100%;
padding: 10px;
margin: 0;
border: 1px solid #888;
color: #888;
}
В данном случае свойство max-width использовалось мной долгое время в целях предотвратить вываливание resizable textarea из родительского контейнера при попытке растянуть его больше ширины родителя. Сегодня столкнулся с тем, что браузеры (конкретно хром и фокс последних версий, остальные пока не проверял) при ресайзе textarea просто задают ей инлайновые стили, тем самым аннулируя данный фикс. Объясните идиоту, насколько это нормально, когда браузер (или его разработчики) сам решает, какой CSS будет у того или иного элемента и перечеркивает приоритеты CSS-файла? Просто мне такое поведение кажется абсолютно ненормальным.
P.S.: решение данной проблемы, конечно, существует. Но очень уж мне не хочется использовать !important в своем коде, т.к. потом такие стили очень сложно переопределить в случае необходимости, что ведет к появлению откровенного говнокода в проекте.
P.P.S.: кстати, хром так же добавляет на тег инлайново стиль height: auto, если ваша страница не влазит в область просмотра экрана по вертикали...
Простой
Простой