Каталог RSS-каналов
Статистика

RSS-каналов в каталоге: 3390

Добавлено сегодня: 0

Добавлено вчера: 0

Hi-Tech / Интернет

CSS-LIVE

Жизнь во фронтенде

Найдено 59 записей

Перевод статьи Towards Responsive Elements с сайта bkardell.com, опубликован на CSS-live.ru с разрешения автора — Брайана Карделла В этой статье я расскажу о проблеме «выражений от контейнера», попытаюсь пролить свет на некоторые заблуждения, и ввести вас в курс состояния дел. Наблюдение за стандартами может вогнать разработчика в ступор. Мы можем узнавать о разработке новых спецификаций, появлении новых функций, о которых мы и понятия не имели — возможно, каких-то для нас совсем неважных. При этом «Выражения от контейнера», явно одну из самых востребованных фич CSS, как будто попросту… игнорируют. Как это так? Почему Рабочая группа по CSS как будто не прислушивается к нам? Почему за все эти годы не появилась хоть какая-нибудь официальная CSS-спецификация —...

Рабочая группа по CSS начала работу над новым «снимком» состояния CSS (CSS Snapshot). Прошлый 2019-й год прошел без своего «снимка» (только в январе вышла последняя редакция CSS-2018), так что давно пора! Редакторский черновик CSS-2020 уже создан. Пока отличий от CSS-2018 немного: модуль CSS-изоляции 1 уровня (CSS Contain 1), достигший за это время финального статуса рекомендации, перешел из раздела «на очереди» в полноценное официальное определение CSS, и исправлено несколько мелочей в самом тексте. Но обсуждение еще идет. Почти наверняка в новое официальное определение войдут гриды (уже без оговорок), вероятно – каскад 4 уровня (теоретически он уже проработан на 100%, да и поддержка за последний год улучшилась) и функции плавности 1 уровня (они теперь...

Веб в 2020 году: расширяемость и совместимость

Перевод статьи The Web in 2020: Extensibility and Interoperability с сайта css-tricks.com для css-live.ru, автор — Юна Кравец. В последние годы мы наблюдали, как быстро развиваются и меняются веб-технологии. В 2020 году основными трендами сообщества веб-разработчиков вполне предсказуемо станут расширяемость и совместимость. Давайте рассмотрим их подробнее. Расширяемость Расширяемость определяется тем, насколько гибко мы можем приспособить ту или иную технологию для решения своих задач. За последние несколько лет мы построили компонентно-ориентированный веб — как в разработке (компоненты React! компоненты Vue! компоненты Svelte! веб-компоненты!), так и в дизайне (дизайн-системы!). Интересно, как форма определяется содержанием, да? Теперь мы пытаемся сделать...

Предпоследняя неделя января выдалась плодотворной для Рабочей группы по CSS. Целых три дня редакторы CSS-стандартов собирались в офисе Igalia (тех ребят из Испании, которым мы обязаны одновременным внедрением CSS-гридов в половину браузерных движков). В числе прочего обсуждались новые возможности математических вычислений в CSS, о которых давно мечтали верстальщики. Итог этого обсуждения Таб Аткинс подвел в своем твите, скриншот которого вы видите выше. Итак, в добавок к привычной функции calc() и только-только набирающим популярность min(), max() и clamp(), модуль значений и единиц CSS 4 уровня теперь обзаведется аналогами почти всех функций объекта Math из JS: округление (round()). У нее будут разные режимы, как именно округлять, в зависимости от...

Одним из самых больших разочарований CSS-гридов с самого их появления была невозможность решить задачу плотной упаковки блоков, известную как «Masonry-раскладка» (в честь самой популярной JS-библиотеки для нее). Алгоритм авторазмещения с ключевым словом dense почти решает ее, но… лишь почти, к тому же упирается в досадное браузерное ограничение в 1000 грид-полос. Веб-разработчики давно просили добавить такую возможность в стандарт, но, как часто бывает в CSS, всё портила циклическая зависимость: размеры элементов зависят от размеров контейнера, которые, в свою очередь, зависят от размеров элементов. Поэтому дальше обсуждения на гитхабе дело не шло. Но на этой неделе Мэтс Палмгрен из Mozilla внес новое, конкретное и подробное предложение, как относительно...

На прошлой неделе спецификация режимов письма (CSS Writing Modes Level 3) получила статус рекомендации, т.е. стандарта W3C. В связи с этим W3C выпустил целый специальный пресс-релиз, отмечающий эту публикацию как важную веху в многолетней работе над представлением текста в интернете и поддержкой разных языков. Далеко не каждый новый стандарт удостаивается такого внимания. На странице пресс-релиза бросается в глаза слоган «Сделаем Всемирную паутину всемирной!» на четырех языках (английском, китайском, японском и корейском) и отзывы членов W3C на этих же языках, набранные вертикально. Это наглядная демонстрация всего одной из массы возможностей нового стандарта. Аудитория интернета становится всё шире и разнообразнее, и задумываться о поддержке...

Хотя мы свыклись с «вечнозеленой», безверсионной природой CSS, иногда хочется каких-то ориентиров. Всё-таки, как ни крути, CSS сегодня, когда во всех основных движках доступны гриды с CSS-переменными — совсем не то же самое, что CSS в каком-нибудь 2012-м, когда даже флексбоксы были туманным будущим. И постоянно растущий зоопарк модулей с уровнями от первого до пятого включительно — причем первые могут быть гораздо новее последних — ясности не добавляет. Внимательные читатели нашего сайта уже знают, что с 2007 года существует периодически обновляемый документ под названием «CSS Snapshot» (т.е. «снимок» состояния CSS), c лаконичным адресом https://w3.org/TR/css. Один из его разделов называется (ни много ни мало) «Официальным определением CSS». Чем не...

Поводом для этой заметки стал недавний твит нашего давнего знакомого Зака Лезермана, лучшего в мире знатока веб-шрифтов: Сегодня у меня возникла потребность в условных операциях с кастомными свойствами CSS. flex-basis: (—my-variable ? 0 : 4px) Я не смог сделать это с фолбэками в var(). Это возможно или обсуждается где-нибудь среди стандартистов? (CSS-in-JS — ответ не на тот вопрос) Другими словами, нужно выбирать ту или иную величину в зависимости от наличия переменной, независимо от ее значения. И я решил поделиться несколькими находками, связанными с неочевидными (по крайней мере для меня:) особенностями CSS-переменных. Можно считать это еще одним уроком CSSbattle – именно там я на них впервые наткнулся. Возможно, и вам они где-нибудь пригодятся:) 1...

Смогут ли React-хуки заменить компоненты высшего порядка (HOC)?

Перевод статьи Do React Hooks Replace Higher Order Components (HOCs)? с сайта medium.com для css-live.ru, автор — Эрик Эллиотт «Мандаринка» — снимок Малкольма Карлоу (CC-BY-2.0) Как только API React-хуков вышел, стало появляться много вопросов о том, сможет ли он заменить другие общие библиотеки и паттерны в экосистеме React+Redux. Хуки задумывались как замена классам и еще одна прекрасная альтернатива для композиции поведения в отдельные компоненты. Компоненты высшего порядка также полезны для композиции поведения. Очевидно, что их задачи где-то пересекаются, так не заменить ли нам компоненты высшего порядка хуками? Более чем ясно, что некоторые HOC-и они заменить могут. Но нужно ли заменять все ваши HOC-и на React-хуки? Чтобы это выяснить, для начала...

Смогут ли React-хуки заменить Redux?

Перевод статьи Do React Hooks Replace Redux? с сайта medium.com для css-live.ru, автор — Эрик Эллиотт Вкратце: хуки хороши, но Redux они не заменят «Мандаринка» — снимок Малкольма Карлоу (CC-BY-2.0) Как только API React-хуков вышел, стало появляться много вопросов о том, сможет ли он заменить Redux. Как по мне, хуки довольно слабо пересекаются с Redux. Они не дают никакого нового волшебства для состояний, а лишь улучшают API для того, что уже было в React. Но с API хуков пользоваться нативным React-инструментарием для состояния стало гораздо удобнее, а поскольку он – еще и более простая замена для классовой модели, мне теперь гораздо чаще удается к месту использовать состояние компонента Чтобы мои слова стали понятнее, давайте сначала разберемся, зачем...

Перевод статьи Using CSS Custom attributes generated by JavaScript as a handover mechanism с сайта medium.com для css-live.ru, автор — Кристиан Хайльман Обновление: изначально я слишком упростил, что пользовательские атрибуты не поддерживают конкатенацию, но благодаря Шиме Видасу, Брайану Карделу и Грегу Уитфорту ситуация прояснилась. Нововведения в CSS стали понемногу размывать границы между ним и JavaScript. CSS был статичным языком, отвечающим за определение цветов и внешний вид, а не за интерактивность. Размеры в процентах помогали в какой-то мере подстраиваться под окружение, но реагировать на изменения было прерогативой JavaScript. В былые времена HTML отвечал за структуру, CSS — за внешний вид, а JavaScript — за интерактивность. Или, как я сказал в...

Фантастические веб-спецификации и где они обитают

Многие разработчики, что уж скрывать, недолюбливают спецификации. Одни считают их скучными. Другим они вообще кажутся монстрами, не иначе как порожденными мифической Ехидной (невероятно, но это отчасти правда: именно так — Echidna — называется система автопубликации, используемая в W3C). Новичка они могут запутать, как лешие, заманить в ловушку, как сирены, и озадачить неразрешимыми загадками, как Сфинкс. Зато о тех, кто проник в их тайны и подчинил себе их мощь, порой слагают легенды фронтенда. Эта статья расскажет об основных опасностях, подстерегающих новичка в царстве спецификаций, откуда их можно ждать, по каким признакам их можно распознать, и о том, как «приручить» спецификации и сделать их своими верными слугами и помощниками. Спецификации-оборотни...

Сегодня на сайте W3C появилась знаменательная новость: W3C и WHATWG подписали общий меморандум о совместной работе над едиными спецификациями HTML и DOM. То есть многолетний раскол, результатом которого были две разные версии главного стандарта веба и постоянная путаница между ними, должен вот-вот закончиться! Вот основные тезисы меморандума: вся работа над спецификациями HTML и DOM будет вестись в репозиториях WHATWG; WHATWG, как и раньше, будет поддерживать «живые стандарты»; примерно раз в полгода WHATWG будет выпускать так называемый «черновик для обсуждения» (Review Draft). Этот же самый документ (не отдельная копия!) будет затем проходить по цепочке статусов W3C (рабочий черновик, кандидат в рекомендации, предложенная рекомендация, рекомендация...

Родительский селектор, т.е. возможность стилизовать элементы в зависимости от их содержимого — давняя, но пока несбыточная мечта многих верстальщиков. Предложения такого селектора, в том или ином виде, бродят по черновикам W3C с начала двухтысячных. Но он получается очень ресурсоемким и медленным. Поэтому в черновике модуля CSS-селекторов 4 уровня изначально селекторы делились по «профилям»: «живой», отражающий состояние интерфейса в реальном времени и используемый для оформления, и «мгновенный снимок» (ранее «статичный»), для одного конкретного момента и доступный только в JS-методах типа querySelector(). До последнего времени селектор :has() был единственным исключением из «живого» профиля. Что значило, что даже когда (и если) браузеры его реализуют...

Уроки CSSbattle

В начале апреля появилась затягивающая и познавательная онлайн-игра для верстальщиков — CSSbattle.dev. Вашего покорного слугу угораздило «влипнуть» в нее практически с самого начала (и даже пару раз какое-то время побыть в самом топе:). Это был интересный и поучительный опыт, которым хочется поделиться. Придумали и реализовали эту игру два друга-тёзки из Индии, фронтендер Кушагра Гур и дизайнер Кушагра Агарвал. Жанр таких развлекательных состязаний называют «code golf»: как в гольфе надо закатить мяч в лунку минимальным числом ударов, так здесь надо решить задачу минимальным количеством кода. Здесь задача — воспроизвести 12 несложных геометрических рисунков, а код — любой (CSS, HTML…), кроме скриптов и ссылок на внешние ресурсы. Кроссбраузерность...