Стайлинг и създаване на скриптове за плъзгачи, уебмастър

Аз съм в момента работи върху първия си платен проект. Наред с другите неща в този проект трябва да направя, за оформяне и писане на скриптове за плъзгачите. Има някои интересни точки, които бих искал да привлека вниманието ви, като например проблеми с показването в IE. Android WebKit и правилното използване на входните и променя събития. Както и преглед на синтаксиса.

Тук е моят пример. В този конкретен случай, членове на Холандия с помощта на плъзгачи са помолени да се разделят бюджет на 100.0 милиона евро между няколко отдела. Общата стойност на всички плъзгачите не трябва да надвишава 100 (милиона), което изисква написването на малък скрипт.

Плъзгачът и плъзгач пистата

Тук плъзгача. Технически, това е известно като. и не се поддържа IE9 и по-долу.

Плъзгачът включва песен, по който потребителят влека плъзгача. За да проследите и бегачът може да кандидатства стилове, но не и скриптове.

Основи стилове

Стайлинг плъзгачи не е толкова трудно. За палеца и на пистата могат да бъдат персонализирани стилове, въпреки че е необходимо псевдо зависи от браузъра:

За палецът се използва -webkit слайдер-палец. -moz-гама-малка или -MS-малка.

По пътя можете да "обжалва" през -webkit слайдер-изпълнима-писта. -moz-гама-запис или -MS писта.

Вие не може да се съчетаят тези селектори в едно правило, въпреки факта, че правото да използва всички браузъри споделят едни и същи стилове (с изключение на вдлъбнатината за палеца). Ако браузърът установи, селектор, че той не може да разпознае, че пренебрегва останалите. Така че трябва да се повтори, или да използвате CSS генератор на сървъра страна.

IE и MS Edge изисква прозрачен цвят и граничен цвят на пистата, или те показват стила на пътя по подразбиране. В допълнение, на плъзгача, те изискват различни граници в сравнение с други браузъри.

В моята височина например слайдер от около 40 пиксела. Оказва се, че основната плъзгача стил Имотът е разположен преливане: скрит. която крие голямата част от плъзгача в ръба и IE. За да поправите това, което трябваше да е изрично определен височината на плъзгача.

В IE. но не и в Edge. плъзгач отстъп. Затова тире пълнеж: 0 и да си спестите главоболието.

Чел съм няколко пъти, че MS Edge трябва да поддържат свойства -webkit-. Но на практика се оказа, че не е възможно да се работи с един набор от стилове и Edge. и WebKit / мигане. Предлагам най-малко използвате някои -ms- стилове, тъй като те са необходими за IE10 и IE11. Най-добре е да се определи -ms- стилове след -webkit-. Така -ms- стилове ще бъде точно, извършени в Edge.

В браузъри, които са базирани на WebKit двигател и Blink. плъзгача има по подразбиране кутия оразмеряване граница кутия. докато във всички останали браузъри, този имот е съдържание кутия. По-добре е да настроите кутия оразмеряване на палеца в явна форма.

WebKit и Blink също изисква -webkit-вид: няма. но с едно изключение. Вижте по-долу.

CSS шаблон

Всички тези проблеми водят до незначителни следващия CSS шаблон:

външния вид на имота и грешка Android WebKit

Друг недостатък в WebKit-базирани браузъри и Blink е, че трябва да зададете на имот -webkit-външния вид: няма за плъзгача и плъзгача (но не и за пистата). Това е показано в шаблона CSS. по-горе.

Попитахме в CSS -webkit-външния вид: няма. Това е единственото решение, което има бъдеще. В Android WebKit искаме да променим стойността на плъзгача-хоризонтално. Но как да знаем, че ние сме в WebKit Android?

Признаване на браузъра? Така че това не е прието в нашите среди - това е по-добро: тя не би работил в Xiaomi Chromium 34 (или 35), който е базиран на Chromium и следователно изисква стойност на никой, но това е "маскиран" с Android.

Първоначалният ми план беше да се получи достъп до стила на плъзгача и да видим дали те съвпадат мина. Ако те не се вписват, а след това ние използваме слайдер-хоризонтала:

Оказва се, че този подход може да бъде показван стилове по подразбиране, вместо да си CSS. Най-общо казано, на скриптове, които се опитват да направят нещо с песен или бегач, не са склонни да работят.

Тогава видях, че това е използването на getComputedStyle () не се поддържа на Android WebKit. Никой не може стил не се възстановява, дори и стилове по подразбиране.

Така че аз написах класически трик, който използва един бъг, за да се отървете от друга не са свързани с него. За щастие, това е сигурно техника, тъй като и двете грешки могат да се появят само в WebKit Android. И браузъра вече не се разработва:

Можете да направите теста веднъж и използването на резултатите за всеки един от плъзгачите. Без значение какво ще тестваме CSS собственост, проверете дали тя наистина съществува. Ако стойността не се връща, а след това определете -webkit-вид: слайдер-хоризонтален слайдер за всеки. Проблемът, решен. Дори по-добре, другите браузъри ни игнорират, докато ние използваме - webkit-.

Попълване лентата за напредъка

В моя пример, на пистата в ляво от плъзгача трябва да има фонов цвят, различен от пистата в дясно. IE / Edge и Firefox оферта за тази употреба псевдо, WebKit и Blink - не. Този код решава проблема за всички версии на IE. Firefox и Edge:

пояснения

Ана Тудор също показа как можете да използвате псевдо: преди като стилизирани съвети, съдържащи текущата стойност. За съжаление, се оказа, че в този случай, IE / EDGE и Firefox не подкрепят: преди или: след това. В IE / Edge има вграден съвет (виж по-долу), но Firefox не може да покаже пояснения.

Опитах се движи елемент който реагира на движението на плъзгача, но писането на скриптове не работи, и да получите текущата плъзгача позиция невъзможно. Също така се опитах да използвате текущата стойност на плъзгача вместо произхода, но опитът завършва с неуспех. В крайна сметка, ние решихме да използваме статичен ред (което в действителност не изглежда като бакшиш).

В IE / Edge има вграден в намек, че в голямата си част не може да бъде оформена. За щастие, можете да го скриете:

Входни събития и промени

Когато потребителят се движи плъзгача по пистата, плъзгача може да предизвика събития или промени в вход. Някои браузъри непрекъснато "произвеждат" събития по време на движение, а други - само след като спре да се движи.

Когато проследяване на действията на потребителите с плъзгач намеси входящи събития и промени. После се обади на манипулатор събитие, когато потребителят спре да се движи плъзгача. Това дава стабилни резултати във всички браузъри:

Въпреки стабилната проследяване на всеки отделен пиксел изместване може в някои браузъри и други браузъри не го подкрепят. И това би довело до ненужни разходи на ресурси, особено на мобилни устройства. Но аз ще се радвам, ако някой опровергае тези предположения.

Превод на статията «стил и скриптови плъзгачите» е подготвена от екип от приятелски Уеб дизайн проект от А до Я.