Is this behavior of browsers normal?

P

personafour2014-08-21 01:10:59

css

personafour, 2014-08-21 01:10:59

Ran into a nasty update in Chrome and Firefox today. We have the following HTML code:

<!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>

And the CSS content:

.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;
}

In this case, the max-width property has been used by me for a long time in order to prevent the resizable textarea from falling out of the parent container when trying to stretch it beyond the width of the parent. Today I encountered the fact that browsers (specifically chrome and fox of the latest versions, the rest have not yet checked) when resizing a textarea, they simply set inline styles for it, thereby canceling this fix. Explain to an idiot how normal it is when the browser (or its developers) decides what CSS this or that element will have and crosses out the priorities of the CSS file? It just seems completely abnormal to me.
PS: the solution to this problem, of course, exists. But I really don't want to use !important in my code, because then such styles are very difficult to override if necessary, which leads to the appearance of frank shit code in the project.
PPS: by the way, chrome also adds a height: auto style to the tag inline if your page doesn't fit vertically into the screen's viewport...

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

E

Evgeny Petrov, 2014-08-21
@Petroveg

First, there is a resize rule to set the behavior of a textarea , and you should have known about that for a long time.
Secondly, developers who consider users to be fools are already rather tired, and their preferences in font size, GUI behavior are an axiom. Try to understand that you do not need to climb where the user does not ask you to climb. Let him increase the field as he sees fit. Don't impose your standards of "beauty".

C

chupok, 2014-08-21
@chupok

Normal since the browser wars.
To be honest, I didn't quite understand the question. Do you need to disable textarea resizing? Then like this:

textarea {
resize: none;
}

You don't like inline styles? Write:

textarea {
display: block;
}