Pull to refresh

Правда ли уже пора использовать CSS Grid Layout?

Reading time 7 min
Views 30K
Website development *CSS *HTML *
Translation

Я учусь пилотировать легкие самолеты. Это отвлекает меня от компьютеров. Недавно мне никак не удавалось удержать Сессну-150 на малой высоте, когда мы приближались к аэропорту Бристоля. Меня буквально засосало в облако восходящим потоком. Мой летный инструктор сказал: «Это не ваша вина, но ваша проблема». Он имел в виду, что я обязана была удерживать высоту, пусть даже что-то работало против меня. Мне нужно было узнать, что бывает такая ситуация, и научиться справляться с ней при пилотировании.


Уже после приземления я подумала, что фраза «это не ваша вина, но ваша проблема» отлично подходит практически к любым ситуациям. В этой статье я раскрываю тему поддержки старых браузеров при использовании новых технологий наподобие CSS Grid Layout. Мы, разработчики, часто робеем при обсуждении браузерной поддержки с заказчиками и коллегами, как будто это мы виноваты в том, что сайты не выглядят в IE9 в точности так же, как в новейших Firefox или Chrome. Пора нам уже принять, что это не наша вина. Но обязанность справиться с этим как следует, с пользой для каждого — во многом наша проблема.

Читать дальше →
Total votes 17: ↑16 and ↓1 +15
Comments 32

Использование CSS-grid при проектировании пользовательских интерфейсов

Reading time 7 min
Views 18K
RUVDS.com corporate blog Website development *CSS *Interfaces *
Translation
CSS-grid — это отличный инструмент для создания макетов страниц контентно-ориентированных сайтов, включающих в себя большие фрагменты текста и другие материалы. Кроме того, эта технология имеет огромное значение и для великого множества традиционных пользовательских интерфейсов веб-приложений.

image

В материале, перевод которого мы сегодня публикуем, Джош Мариначчи рассказывает о том, как использовать CSS-grid для проектирования макетов страниц. Речь пойдёт о страницах, которые способны реагировать на воздействия пользователя и на изменение их содержимого, но при этом всегда ведут себя так, как от них ожидается, в частности — при прокрутке их содержимого.
Читать дальше →
Total votes 25: ↑23 and ↓2 +21
Comments 8

Минимальный размер контента в CSS grid

Reading time 3 min
Views 4.9K
SkillFactory corporate blog Website development *CSS *
Tutorial
Translation
Иногда, когда вы пишете компонент, то вдруг замечаете странную полосу горизонтальной прокрутки. Снова и снова вы пытаетесь исправить положение, только чтобы позже понять, что причина в чём-то другом. Сколько раз так было? В этой статье я растолкую хитрую проблему, которая может стоить часов проб и ошибок; связана эта проблема с макетом сетки CSS, и я подумал, что о ней стоит написать. Прежде чем начать, я хочу дать некоторый контекст. Вот несколько вещей, которые следует принять во внимание. Представьте, что вы:

  • Столкнулись с этой проблемой в середине рабочего дня. Вы устали, и у вас есть много работы, которую нужно сделать.
  • Вы уже проголодались.
  • Первопричину проблемы легко упустить, поскольку она не связана с компонентом, над которым вы работаете.

Учитывая всё это, давайте погрузимся в проблему.


Приятного чтения!
Total votes 13: ↑11 and ↓2 +9
Comments 3

Основы и практика CSS Grid Layout:  как использовать двумерную раскладку для повседневных задач

Reading time 11 min
Views 24K
CSS *

Наш фронтенд-разработчик Данила Абрамов @DanilAbr подготовил материал для новичков и практикующих разработчиков, у которых не было возможности разобраться с Grid. В первой части статьи — основные CSS-свойства и принципы раскладки, без которых невозможно понять Grid. Если вы знакомы с основами, переходите сразу со второй части — там примеры решения реальных задач.

Читать далее
Total votes 5: ↑4 and ↓1 +3
Comments 3