.container больше не нужен

Это не совсем так. Если размер экрана будет меньше, чем заданная ширина контейнера, то padding'ы станут равными нулю, так как выражение внутри calc(50% - width / 2) будет отрицательным.

Но тут всплывает еще одна проблема — нам нужны какие-то минимальные зазоры, чтобы контент не прилипал к краям экрана. Тут могла бы помочь функция max, но она пока поддерживается только в новых Safari. Минимальный padding можно эмулировать с помощью прозрачного border, но в таком случае изначально элегантное решение обрастает костылями.

Набросал пример — https://jsfiddle.net/6kqa4t7n/.

.container больше не нужен

calc(50vw + 590px)

Тут нужен знак "минус"

.container больше не нужен

Количество элементов можно уменьшить, если смешать класcы brif-wrapper и container на одном DOM-узле. А так представленная техника рассматривалась достаточно давно в книге CSS Secrets за авторством Lea Verou.

P.S.: почему используете дробные пиксели в медиа запросах, например (min-width: 1199.98px)?

Как организовать разработку и поддержку блога на WordPress в 2К19 году и не налажать

Лучше использовать такой трюк:

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/assets/styles/style.css?<?php echo time(); ?>" />

Наверно, хотели написать filemtime() вместо time()?

Почему мы предпочитаем CSS(--variable) переменным SASS($variable)?

Управление шкалой типов

В контексте статьи type это «шрифт», а не «тип».

Инструменты для создания адаптивного сайта без доступа к сайту

Вот мой простейший конфиг:

let browserSync = require('browser-sync').create();

browserSync.init({
    proxy: 'http://site.com',
    serveStatic: ['static'],
    files: ['static/**/*.*'],
    rewriteRules: [
        {
            match: /<\/head>/i,
            fn: (req, res, match) => `<link rel="stylesheet" href="/custom.css" />`
        },
        {
            match: /<\/body>/i,
            fn: (req, res, match) => `<script async src="/scripts.js"></script>`
        }
    ]
});

В serveStatic указываем из какой папки брать файлы. В rewriteRules пишем где в html и какие файлы вставлять.

Инструменты для создания адаптивного сайта без доступа к сайту

Для подобных целей использую browser-sync. Его можно использовать для внешнего сайта как прокси и инжектить стили и скрипты из локальной папки.

Кастомизируем select на чистом css

Чем данный способ не устраивает?

8 приемов работы с CSS: параллакс, «липкий» футер и другие

Пример с чекбоксами на MacOS в Chrome 72:

У дизайнера новая идея? Что может быть проще

Такой способ стилизации не лишен недостатков. Предположим, в компоненте Dialog уже были стилизованы компоненты Button подобным образом:

.dialog :global(button) { /* ... например, имеют синий цвет */ }

Что преобразуется с помощью Svelte к виду:

.dialog.svelte-8d16lv button { /* ... */ }

И поскольку SubmitButton тоже находится внутри Dialog начнутся коллизии стилей:

.submit.svelte-138xsye button { /* ... */ }
.dialog.svelte-8d16lv button { /* ... */ }

Поле загрузки файлов, которое мы заслужили

Firefox по каким-то неведомым причинам отказывается применять свойства к метке при фокусе на input[type=file].

Если учитывать относительно современные версии Firefox, то баг можно вылечить с помощью css-псевдокласса :focus-within.

Сам баг: https://bugzilla.mozilla.org/show_bug.cgi?id=1430196

Поле загрузки файлов, которое мы заслужили

Только ни пробелом, ни enter'ом на такой label не нажать. Только мышкой.

Дайджест свежих материалов из мира фронтенда за последнюю неделю №327 (13 — 19 августа 2018)

Иногда вы переводите слишком буквально.

Техники сохранения времени CSS.

Это вообще что такое? Наверно имелось ввиду "экономящие время" или "простые".

Ограничение длины текста через градиент

Как ни странно, свойство -webkit-background-clip работает в последних Edge и Firefox

Типографика и современный CSS

жаль, что переносы Хром не поддерживает

Стоит отметить, что Chrome не поддерживает переносы только на Windows. На Mac пример с hyphens отображается корректно.

Что должен уметь фронтенд-разработчик

Я о странном для меня использовании предлога «в» — «умеет в компьютер».

Что должен уметь фронтенд-разработчик

Откуда пошли фразы типа «умеет в JavaScript»? «Знает JavaScript» звучит как-то правильнее.

CSS Grid Layout. Быстрый старт

Насколько я знаю, нельзя просто так взять и расставить префиксы для IE10+. Так как там есть много несовместимостей.

Как я вспоминал школьный курс геометрии

Еще можно использовать css-фильтр drop-shadow. Тень будет повторять форму объекта со всеми выступающими его частями.

Пример на js bin

Верстка: отображаем пользовательский контент

Во-вторых, необходимо сбросить в 0 пресловутое свойство min-width. Его значение auto было введено специально для flexbox, и к тому же сделано значением по умолчанию. И, что особенно печально, об этом нигде не пишут.

На CSS-tricks выходила статья по этому поводу.

Обратите внимание, что третье значение в свойстве flex задано с единицами измерения. Это баг в IE11, и без единиц измерения в нем ничего не работает.

Филлип Уолтон советовал писать flex-basis в процентах для сокращенной записи: 1 0 0%, так как некоторые css-минимизаторы вырезают, по его словам, px, а % оставляют.