Сравнение изображений на чистом CSS

Сравнение изображений на чистом CSS

Published 4 года ago // No comments

Решая задачу сравнения двух изображений многие отбрасывают мысль сделать это на чистом CSS и весь свой взгляд устремляют на различные jQuery плагины. Увидев реализацию от Ли Вероу (Lea Verou), мировой звезды во Front-end разработке, я понимаю, что это не всегда правильно.

Буквально несколько дней до этого я наткнулся на похожую реализацию от Dudley Storey, однако выше указанный вариант подкупил меня отсутствием JS кода (как бы я его не любил) и намного меньшим объемом написанного кода. Безусловно каждое из них имеет свои плюсы и минусы.

Положительные моменты:

  • Более семантическая разметка — всего 2 изображения и 2 дива. А если бы object-fit поддерживался бы на большем количестве браузеров, можно было обойтись даже одним дивом.
  • Отсутствие JS
  • Меньше CSS кода

Отрицательные моменты:

  • Отсутствие поддержки клавиатуры. На чистом CSS ее невозможно добиться
  • Ползунок можно передвигать только в нижнем правом углу
  • Отсутствие поддержки мобильными устройствами

Тем не менее, несмотря на неидеальность такого решения, можно безусловно судить о потенциале CSS и возможности в ряде случаев отказываться от сложных jQuery плагинов в пользу более простых, легковесных решений.

На этом у меня все. Прогрессируйте 😉