Как стать автором
Обновить
88
126.1
Стас Мельников @melnik909

Помогаю узнать больше про Accessibility и CSS

Отправить сообщение

"Код работает не в вакууме. На практике многое в этой статье не работает так, как написано, хотя на первый взгляд может показаться, что все ок."

Да, код работает не в вакууме. Вопросы создаются в вакууме, потому что проверятся/показывается какой-либо аспект-знание. Умение соединять разные аспекты, в частности " Сделайте им размер шрифта побольше", это отдельный навык, который не проверяется вопросами. Я постарался дать примеры кода, который максимально приближенны к практике. Например, свойством inset или margin-inline.

По поводу логических свойств. Посмотрите видео Kevin Powell или статьи Ahmad Shadeed. Они используют их так, как я написал в вопросах. То, что они могут сломать верстку при определении другого направления текста? Так люди либо это знают, либо узнают и примут решение, что с этим делать. Также существуют разработчики, которые делают проекты для микрокомпаний, у которых мультиязычность не востребована. У них ничего не сломается.

Нет единого правильного направления работы. Есть разные кейсы, к которым нужно использовать разные подходы. Статья про расширение кругозора, а не чтобы заваливать вопросами на собеседовании.

.container {
  width: 100%;
  max-width: 1024px;
}

Изначально мы задаем 100%, но не больше 1024px. Значение 100% браузерами понимается тоже в px, не смотря на то, что мы используем %. Это можно посмотреть во вкладе Computed в DevTools.

Таким образом, мы говорим: пусть ширина элемента в px будет любой, но не больше 1024px. Например, браузеры рассчитали, что 100% в итоге трансформируется в 1000px. В итоге им нужно выбрать минимальное значение между 1000px и 1024px.

Это поведение является функцией min().

Я не смог подобрать удачный пример. А так, здорово, что вы указали. Спасибо!

Если нет определенности какой путь указать, то можно не указывать href. Просто оставить:

<a>мой заказ</a>

В таком случае ссылка перестает ей быть и теряет свойства интерактивности, т.е на нее нельзя сфокусироваться, к примеру. Такое бывает в навигации, когда у ссылки убирают href, чтобы обозначить текущую страницу.

Если не известен путь и интерактивность должна присутствовать, то это только button.

В подвале мало вероятно. Но на странице может быть несколько nav (см. пример с хлебными крошками)
Ну так, кто выбирает инструменты для решения задач?
это происходит без вашего участия. Свойство font-size наследуемое, поэтому указывать 100% или inherit не нужно.
Смысл использования not() в том, чтобы было 1 CSS-правило, а не два
Можно:
— использовать supports или отдельную версию для IE 11, но тогда раздувается код
— можно использовать PostCSS плагины, и довольствоваться ограниченными возможностями

Поэтому если есть IE11 или другие браузеры, которые не поддерживают пользовательские свойства, то лучше отложить свое желание для другого проекта
Преимущества пользовательских свойств:
— можно менять значение в медиа-запросах (пример в статье с переключением цвета и текста)
— без костылей работает calc (я помню был баг либо в Less, либо в Sass)
— работают с атрибутами (пример в статье с svg)
— меньше писать кода для состояний hover, focus и т.п

И сравнение пользовательских свойств с Sass переменным некорректно. Они могут спокойно существовать вместе
Нет. Пользовательские свойства могут также наследоваться. В следующей статье об этом и будет рассказано. И примеры подобраны с целью показать, что можно сделать теоретически. Практические примеры будут в другой статье.
Вы все же перегибаете палку. Мальчишка еще учится. Да, его решение далеко от совершенства, но и говорить так, тоже не стоит. Вспомните себя в 20. Нужно меньше негатива и больше конструктивной критики.
Хорошо. Допустим все можно реализовать. Сетка замечательная. Но основной постулат верстки — это семантика. Как вы думаете, такой код семантичен?

<div class="col-xs-offset-3 col-xs-12 col-md-offset-4 col-md-6 col-lg-offset-1 col-lg-5"></div>
Контролы — это элементы с помощью, которых пользователь может управлять интерфейсом.

Boostrap полезный инструмент для своих задач. Нельзя делать на Bootstrap'е уникальный дизайн, потому что вам придется делать свой skin для него. Если вы используете только сетку, то вы будете вынуждены делать большую вложенность в HTML'е.

Дальше пройдусь по вашему комментарию.

1. Я повторюсь. Не все костамизируют его. Большинство скачивают полную версию.
2. Я может и ошибаюсь, но я понял, что если человек не использует Boostrap, то он не знает основы веб-дизайна? К основам я причисляю и унификацию и стандартизацию
3, 4. Прежде чем делать выводы, вы хотя бы лично со мной пообщайтесь. Может вы правы, а может и нет.
Из-за того, что дизайн уникальные его контролы лишние. Немногие люди делают кастомизацию. Его сетка не всегда полностью нужна. Да и есть сомнения, что вообще нужна. Сколько видел примеров от нее код становится более избыточен.

Плюс сейчас все больше людей, которые думают, что они верстальщики, а на деле они обычные «бутстрапщики». Такой род «специалистов » не знает основы верстки. К примеру, они не знают как сделать сетку самостоятельно.
По моему мнению Bootstrap подходит для двух вещей:
— прототипирование интерфейса;
— создание дизайна без дизайнера. Например, когда программисты делают админки, то вместо стандартных контролов браузера подключают уже оформленные Boostrap'a.

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

Информация

В рейтинге
41-й
Откуда
Пенза, Пензенская обл., Россия
Дата рождения
Зарегистрирован
Активность

Специализация

UX Accessibility Исследователь