Мобільна сторінка з адаптивним дизайном (async defer Google script)
Ця сторінка демонструє реалізацію мобільного інтерфейсу з використанням чистих HTML5 та CSS3, без JavaScript.
Обмеження та особливості реалізації
Введені технічні обмеження:
- Чистий HTML5/CSS3 без JavaScript
- Mobile First підхід до розробки
- Підтримка всіма основними браузерами
- Абсолютна мінімізація обсягу коду
- Використання тільки системних шрифтів
Структурні обмеження:
- Два не фіксовані меню (верхнє та нижнє)
- По 5 текстових кнопок у кожному меню
- Відсутність графічних елементів у кнопках
- Чорно-срібно-біла кольорова схема
- Семантична розмітка з використанням article
Особливості реалізації коду
Мінімізація CSS:
- Використано тільки 65 рядків CSS коду
- Відсутність зайвих декоративних стилів
- Мінімальна кількість CSS-правил
- Використання каскаду для успадкування
- Відсутність складних селекторів
Адаптивність:
- 3 брейкпоінти (mobile, tablet, desktop)
- Прогресивне збільшення шрифту
- Гнучкі контейнери з max-width
- Відносні одиниці виміру (rem, %)
- Flexbox для компонування
Оптимізація:
- Один CSS-файл без зовнішніх залежностей
- Мінімальна кількість HTTP-запитів
- Оптимальні розміри для дотику (кнопки)
- Відсутність складних обчислень у CSS
- Проста типографіка без завантаження шрифтів
Додатковий демонстраційний контент
Цей блок демонструє прокрутку сторінки разом з меню. Обидві навігаційні панелі не фіксовані та переміщуються разом з контентом.
Використання семантичних тегів article забезпечує правильну структуру документа та покращує доступність для допоміжних технологій.
Підзаголовок третього рівня
Текст для демонстрації вкладеності семантичних елементів. Кожен article є незалежним блоком контенту.