Действительно, даже несмотря на то, что метод не работает в режиме просмотра devtools, сейчас все проверил, и на телефоне все работает прекрасно. Так что, в течение недели, сделаю фото того, как это работает на смартфоне, модифицирую вашу функцию, сделаю гайд по ее использованию и добавлю все в статью.
Если, например до 150px, нужно адаптировать лишь небольшое количество элементов, а не весь сайт вручную, то вполне себе вариант.
И раз уж речь зашла про font-size есть формула CSS и миксин SCSS, которые дадут более обширную поддержку адаптивности в разных браузерах. Они основаны на свойстве calc, и преимущество этого метода заключается в том, что данный способ поддерживается в Chrome и Firefox 20-x версий (clamp 70+) и в IE 11.
Да, универсальной пилюли, чтобы стало хорошо, пока нет (а может никогда и не будет). Но на самом деле, все не так плохо. Постоянная доработка Flex и Grid, новые свойства вроде clamp, min и max, сильно упрощают жизнь разработчика. Если посмотреть со стороны, мы движемся в прекрасный мир адаптива без мороки, где нам доступно все больше и больше инструментов. Хотя как и везде, повозка движется, но движется медленно, т.к все тянут её в разные стороны, кто-то вводит то, кто-то это. Те же самые Mozilla ввели поддержку gap для Flexbox на два года раньше Chrome, но не могут исправить работу min-width для body. И именно поэтому, пока ждём что-то хорошее и универсальное, но даже когда такое появится, использовать не будем, а будем снова ждать, года два, пока все начнут поддерживать это.
Устанавливать min-width для body или нет зависит от того, хорошо ли адаптируется контент на сайте или нет. Если на сайте за viewport выходят правильно адаптированные изображения, они и до 60px будут резиниться, а если за экран выходит заголовок с размером шрифта в 50px, максимум, что может сделать браузер, это перенести слова на новую строчку, а если слово большое, разрывать его не разрешено, оно просто выйдет за viewport и создаст горизонтальный скролл.
Да, безусловно, с помощью медиазапросов можно и тот же самый текст адаптировать, изменяя его размер, вплоть до устройств с шириной экрана в 100px, но тут уже вопрос рациональности. Зачем вручную оптимизировать сайт под очень редко используемые устройства (ширина большинства смартфонов более чем 320px), если можно больше времени уделить хорошему адаптиву для смартфонов в 320px, а затем указать min-width для body и использовать функцию, которая в итоге справится не хуже, а время сэкономит.
P.S. Пожалуйста, скиньте ссылку на сайт про который вы говорите. Уж очень хочется узнать, как там реализован адаптив.
В дополнение к данной статье хочу сказать про малоизвестную, но полезную CSS функцию image-set. Она является аналогом тега picture в HTML и позволяет выбрать несколько источников для изображения background-image.
Спасибо, что написали про атрибут hidden, информацию про него добавил в статью.
Кстати, инлайновые стили использовались для более удобной демонстрации кода в скриншоте. На всякий случай, также указал в статье, что в обычном проекте инлайнами пользоваться определенно не стоит.
Кстати, Habr я как раз начал вести из-за того, что хочу облегчить, изучение программирования другим. Чтобы решать вопросы и проблемы, которые могут возникнуть в ходе обучения.
Жалко, конечно, что на данный момент у моих статей низкий технический уровень материала, но в будущем он будет расти. Так как и мой уровень в разработке с изучением станет выше, и проблемы, которые я буду решать и освещать для других, станут более сложными и интересными
На самом деле пока и представить себе не могу, какие методы реализации идей используются на других уровнях разработки. Приятно осознавать, что есть огромный горизонт для изучения.
Но в этой статье я как раз и описал решение неочевидной для себя, с высоты моей колокольни, вещи. Оно нацелено на начинающих, и надеюсь будет полезно тем, кто, как и я, недавно начал изучать web-разработку.
В целом вы правы и с заполнителем было бы лучше, но в ходе этой работы, придерживался макета, где в дизайне по умолчанию select пустой. Иммено поэтому, кстати, я и столкнулся с проблемой пустого тега Option в вариантах выбора. А чтобы решение можно было найти легче (я нашел его не сразу), и написал статью
Если аккордеон меняется в размерах после анимации (как в случае с max-height), то никак, т.к его уменьшение ведет за собой и смещение контента под ним наверх, либо появление контента скрывающегося под ним, если например форма позиционирована абсолютно и не влияет на окружение, когда она сворачивается.
Если аккордеон не меняется в размерах (как в случае с opacity, transform), страница не перерисовывается и под ним остается пустое место, что не выглядит красиво, а если это пустое место убрать (например с помощью position: absolute ; top : -100%; и для родителя overflow:hidden) страница все равно будет вынуждена перерисоваться, чтобы сместить блоки под формой, либо показать фон за ней, если форма не влияет на окружение и позиционировано абсолютно.
Именно поэтому в моем случае высота контента около 550px, а высота max-height 3000px. Да такая разница в высоте создает небольшую задержку, но добавляет надежности, ведь я не думаю, что заказчик увеличит блок с формой в 4 с половиной раза
P.S Благодаря вашему комментарию, добавил информацию об указании высоты с запасом в статью, чтобы любой, без чтения комментариев мог узнать про это. Спасибо
Да, соглашусь с тем, что анимация через max-height имеет свои недостатки, и если я найду более оптимальное решение, то поделюсь им. Однако, кроме известного размера блока, дёрганость можно решить микроанимациями (0.3 и 0.2 s), что не дает ее увидеть, а ощущение плавности для пользователя всё же создастся.
Также, поблагодарю за предложение решения через колонки гридов, т.к никогда об этом не слышал, и даже несмотря на какой-то баг, будет интересно это изучить.
Добрый вечер, большое cпасибо за критику, до 10 июня обновлю статью и добавлю ссылку на песочницу кода + гифку.
P.S К слову, такой долгий срок обусловлен тем, что на момент написания кода не думал, что буду выкладывать его в песочницу. Но сейчас, немного почищу код, добавлю комментарии, чтобы читать его было проще, а потом выложу его в песочницу.
Спасибо за вклад в решение проблемы!
Действительно, даже несмотря на то, что метод не работает в режиме просмотра devtools, сейчас все проверил, и на телефоне все работает прекрасно. Так что, в течение недели, сделаю фото того, как это работает на смартфоне, модифицирую вашу функцию, сделаю гайд по ее использованию и добавлю все в статью.
Если, например до 150px, нужно адаптировать лишь небольшое количество элементов, а не весь сайт вручную, то вполне себе вариант.
И раз уж речь зашла про font-size есть формула CSS и миксин SCSS, которые дадут более обширную поддержку адаптивности в разных браузерах. Они основаны на свойстве calc, и преимущество этого метода заключается в том, что данный способ поддерживается в Chrome и Firefox 20-x версий (clamp 70+) и в IE 11.
Ссылка на статью: https://habr.com/ru/post/501392/
Да, универсальной пилюли, чтобы стало хорошо, пока нет (а может никогда и не будет). Но на самом деле, все не так плохо. Постоянная доработка Flex и Grid, новые свойства вроде clamp, min и max, сильно упрощают жизнь разработчика.
Если посмотреть со стороны, мы движемся в прекрасный мир адаптива без мороки, где нам доступно все больше и больше инструментов. Хотя как и везде, повозка движется, но движется медленно, т.к все тянут её в разные стороны, кто-то вводит то, кто-то это. Те же самые Mozilla ввели поддержку gap для Flexbox на два года раньше Chrome, но не могут исправить работу min-width для body.
И именно поэтому, пока ждём что-то хорошее и универсальное, но даже когда такое появится, использовать не будем, а будем снова ждать, года два, пока все начнут поддерживать это.
Устанавливать min-width для body или нет зависит от того, хорошо ли адаптируется контент на сайте или нет. Если на сайте за viewport выходят правильно адаптированные изображения, они и до 60px будут резиниться, а если за экран выходит заголовок с размером шрифта в 50px, максимум, что может сделать браузер, это перенести слова на новую строчку, а если слово большое, разрывать его не разрешено, оно просто выйдет за viewport и создаст горизонтальный скролл.
Да, безусловно, с помощью медиазапросов можно и тот же самый текст адаптировать, изменяя его размер, вплоть до устройств с шириной экрана в 100px, но тут уже вопрос рациональности. Зачем вручную оптимизировать сайт под очень редко используемые устройства (ширина большинства смартфонов более чем 320px), если можно больше времени уделить хорошему адаптиву для смартфонов в 320px, а затем указать min-width для body и использовать функцию, которая в итоге справится не хуже, а время сэкономит.
P.S. Пожалуйста, скиньте ссылку на сайт про который вы говорите. Уж очень хочется узнать, как там реализован адаптив.
В дополнение к данной статье хочу сказать про малоизвестную, но полезную CSS функцию image-set. Она является аналогом тега picture в HTML и позволяет выбрать несколько источников для изображения background-image.
Пример:
.div { background-image: image-set( "puppy.webp" type("image/webp") 1x, "puppy2x.webp" type("image/webp") 2x, "puppy.png" type("image/png") 1x, "puppy2x.png" type("image/png") 2x ); }Спасибо, что написали про атрибут hidden, информацию про него добавил в статью.
Кстати, инлайновые стили использовались для более удобной демонстрации кода в скриншоте. На всякий случай, также указал в статье, что в обычном проекте инлайнами пользоваться определенно не стоит.
Спасибо за критику, скриншоты заменил, теперь они более читаемы
Кстати, Habr я как раз начал вести из-за того, что хочу облегчить, изучение программирования другим. Чтобы решать вопросы и проблемы, которые могут возникнуть в ходе обучения.
Жалко, конечно, что на данный момент у моих статей низкий технический уровень материала, но в будущем он будет расти. Так как и мой уровень в разработке с изучением станет выше, и проблемы, которые я буду решать и освещать для других, станут более сложными и интересными
P.s Про кастомные select-ы почитаю
На самом деле пока и представить себе не могу, какие методы реализации идей используются на других уровнях разработки. Приятно осознавать, что есть огромный горизонт для изучения.
Но в этой статье я как раз и описал решение неочевидной для себя, с высоты моей колокольни, вещи. Оно нацелено на начинающих, и надеюсь будет полезно тем, кто, как и я, недавно начал изучать web-разработку.
В целом вы правы и с заполнителем было бы лучше, но в ходе этой работы, придерживался макета, где в дизайне по умолчанию select пустой. Иммено поэтому, кстати, я и столкнулся с проблемой пустого тега Option в вариантах выбора. А чтобы решение можно было найти легче (я нашел его не сразу), и написал статью
Действительно, анимация идет плавнее, за совет спасибо, статью обновил
Статью обновил, добавил ссылку на codepen и гифки
Если аккордеон меняется в размерах после анимации (как в случае с max-height), то никак, т.к его уменьшение ведет за собой и смещение контента под ним наверх, либо появление контента скрывающегося под ним, если например форма позиционирована абсолютно и не влияет на окружение, когда она сворачивается.
Если аккордеон не меняется в размерах (как в случае с opacity, transform), страница не перерисовывается и под ним остается пустое место, что не выглядит красиво, а если это пустое место убрать (например с помощью position: absolute ; top : -100%; и для родителя overflow:hidden) страница все равно будет вынуждена перерисоваться, чтобы сместить блоки под формой, либо показать фон за ней, если форма не влияет на окружение и позиционировано абсолютно.
Именно поэтому в моем случае высота контента около 550px, а высота max-height 3000px. Да такая разница в высоте создает небольшую задержку, но добавляет надежности, ведь я не думаю, что заказчик увеличит блок с формой в 4 с половиной раза
P.S Благодаря вашему комментарию, добавил информацию об указании высоты с запасом в статью, чтобы любой, без чтения комментариев мог узнать про это. Спасибо
Спасибо, протестирую, возможно добавлю в статью
Да, соглашусь с тем, что анимация через max-height имеет свои недостатки, и если я найду более оптимальное решение, то поделюсь им. Однако, кроме известного размера блока, дёрганость можно решить микроанимациями (0.3 и 0.2 s), что не дает ее увидеть, а ощущение плавности для пользователя всё же создастся.
Также, поблагодарю за предложение решения через колонки гридов, т.к никогда об этом не слышал, и даже несмотря на какой-то баг, будет интересно это изучить.
Добрый вечер, большое cпасибо за критику, до 10 июня обновлю статью и добавлю ссылку на песочницу кода + гифку.
P.S К слову, такой долгий срок обусловлен тем, что на момент написания кода не думал, что буду выкладывать его в песочницу. Но сейчас, немного почищу код, добавлю комментарии, чтобы читать его было проще, а потом выложу его в песочницу.