Динамически определять, если позиция: Sticky поддерживается браузером - PullRequest
Новая
       11

Динамически определять, если позиция: Sticky поддерживается браузером

0 голосов
/ 13 февраля 2020

Есть ли способ, используя Javascript или jQuery, определить, поддерживает ли браузер position:sticky или нет?

Я знаю, что большинство современных браузеров поддерживают его, но некоторые старые браузеры и некоторые мобильные браузеры этого не делают.

Меня не интересует полифилл. Я хочу предпринять определенные действия, только если position:sticky работает, в противном случае просто оставьте все как есть.

Ответы [ 2 ]

1 голос
/ 13 февраля 2020

Отличный и мощный способ проверить, доступна ли функция CSS, - это использовать функцию CSS.supports JavaScript: 

if (CSS && CSS.supports && CSS.supports("position", "sticky")) {
  // awesome: position:sticky is supported on this browser!
} else {
  // fallback: I cannot rely on position:sticky!
}

Я надеюсь, что это ответ на ваш вопрос, но я думаю, что это Стоит отметить, что если у вас возникнет соблазн использовать CSS.supports(), вы должны хотя бы рассмотреть возможность реагирования на нехватку функций, просто используя только CSS. Хотя JavaScript - это отличный способ внести динамические c изменения на страницу, но часто вам даже не нужно писать что-либо, чтобы ваша страница реагировала на отсутствие функции (например, залипание).

Например 

/* 
  ...
  Basic styles for old browsers that don't support sticky go here.
  ... 
 */

@supports (position:sticky) { 
  /* Overrides to the above styles for modern "sticky" browsers go here */
}

И даже тогда вам часто даже не нужно go это воображение. Например, предположим, у вас есть навигационная панель, которую вы бы хотели, чтобы она была position:sticky, если это возможно, но в противном случае просто position:absolute. Даже если некоторые браузеры не понимают sticky, вы можете сказать: 

.my-nav-bar {

  /* The fallback goes first */
  position: absolute; 

  /* This 'enhancement' is ignored if not understood, */
  /* but overrides the previous value if the browser supports it. */
  position: sticky; 

  top: 50px;
  /* ... etc ... */
}
1 голос
/ 13 февраля 2020

Из модернизра: 

/*!
{
  "name": "CSS position: sticky",
  "property": "csspositionsticky",
  "tags": ["css"],
  "builderAliases": ["css_positionsticky"],
  "notes": [{
    "name": "Chrome bug report",
    "href":"https://bugs.chromium.org/p/chromium/issues/detail?id=322972"
  }],
  "warnings": ["using position:sticky on anything but top aligned elements is buggy in Chrome < 37 and iOS <=7+"]
}
!*/
define(['Modernizr', 'createElement', 'prefixes'], function(Modernizr, createElement, prefixes) {
  // Sticky positioning - constrains an element to be positioned inside the
  // intersection of its container box, and the viewport.
  Modernizr.addTest('csspositionsticky', function() {
    var prop = 'position:';
    var value = 'sticky';
    var el = createElement('a');
    var mStyle = el.style;

    mStyle.cssText = prop + prefixes.join(value + ';' + prop).slice(0, -prop.length);

    return mStyle.position.indexOf(value) !== -1;
  });
});

Источник: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css/positionsticky.js

с: 

prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');

Источник: https://github.com/Modernizr/Modernizr/blob/master/src/prefixes.js

Рабочий пример (без зависимостей Modernizr): 

function browserSupportsPositionSticky() {
  var prop = 'position:';
  var value = 'sticky';
  var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');

  var el = document.createElement('a');
  var mStyle = el.style;
  mStyle.cssText = prop + prefixes.join(value + ';' + prop).slice(0, - prop.length);
  
  return mStyle.position.indexOf(value) !== -1;
};

console.log(browserSupportsPositionSticky());
...