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

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

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

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

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

CSS-LIVE

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

Найдено 56 записей
Когда 255  × 0 не равно нулю

Перевод статьи When 255 × 0 does not Equal Zero с сайта danielcwilson.com для css-live.ru, автор — Дэниел Уилсон Прежде всего, важная оговорка: я не эксперт в работе с цветами и в цветовых профилях мониторов. И я понимаю лишь самые очевидные различия между дефолтным цветовым пространством для веба — sRGB — и другими более новыми моделями. Мы обсудим оба случая, я объясню то, что знаю сам, и оставлю другим возможность (и ссылки) подключиться к разговору и объяснить лучше. Ладно… с этим разобрались, теперь к делу (и, пожалуй… простите, что заранее проспойлерил, о чем будет статья): поговорим о математике режимов наложения! Как режимы наложения работают в вебе сегодня Если вы пользовались Photoshop-ом (а тем, кто тоже вспомнил Сorel-Photo-Paint-из-90-х, от...

Основные советы по SEO-оптимизации сайтов на JavaScript

Перевод статьи Essential JavaScript SEO Tips с сайта levelup.gitconnected.com для css-live.ru, автор — Айман Рахмат. Сделайте свой контент доступным для поиска Google. Если вы создаете сайт или веб-приложение на JavaScript, вам следует выполнить несколько основных действий, чтобы сделать его контент доступным для поисковых систем. Давайте рассмотрим несколько приемов SEO-оптимизации, которые помогут пользователям найти ваш контент. 1. Пишите информативные заголовки У всех страницы сайта должны быть информативные и понятные заголовки, кратко описывающие их содержание. Заголовок страницы должен быть заключен в тег и желательно в тег . Например, на страницах рецептов не нужно использовать общие заголовки, такие как “Кулинарный блог Аманды”. Вместо этого в...

При всей парадоксальности заголовка, будто взятого из фантастики про «временные петли», это правда. Три недели назад рабочая группа по CSS опубликовала первые публичные рабочие черновики двух модулей CSS. Сегодня к ним добавились еще аж 4 первых публичных черновика (включая два модуля 5 уровня). И многие новинки роднит то, что часть их функций давно работает почти во всех браузерах, и даже в реальных проектах! Вот список этих новинок: Привязка скроллинга 1 уровня (CSS Scroll Anchoring Level 1). Когда-то давно при загрузке контента, например, высоких картинок, элементы меняли высоту и текущий блок мог «ускакать» куда-то вниз, что раздражало пользователей. Новые браузеры по умолчанию автоматически подстраивают положение скроллинга так, чтобы видимый элемент...

Когда-то у CSS была мечта. Светлое будущее, прекрасное далёко, в котором хотелось очутиться побыстрее, о котором слагали песни. У него было краткое и запоминающееся имя – «CSS3». Как всякое будущее, оно было туманным: отдельного стандарта с таким названием никогда не было. Но именно с ним ассоциировалось всё новое и крутое, с чем уже можно было поиграть в экспериментальных реализациях за префиксами и что вот-вот должно было появиться в браузерах. Годы шли, CSS взрослел. То будущее стало повседневностью, а затем незаметно отошло в прошлое. Мы свыклись с отсутствием у CSS версий, худо-бедно научились ориентироваться в зоопарке его модулей (или вот-вот научимся:), и даже нашли способ отслеживать его эволюцию по периодическим «снимкам состояния». Но всё равно...

Перевод статьи 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 — за интерактивность. Или, как я сказал в...