Опит в отстраняване на грешки CSS Имам повече от достатъчно. Някой друг код и моята собствена. Plotforma мобилни и настолни браузъри. Всичко от стари версии на Internet Explorer до последната вечер изгражда на WebKit. Работата с хора, аз осъзнах, че не всеки се регулира процеса на CSS отстраняване на грешки.
Разбрах, че систематичен подход за решаване на проблема с борбата срещу бъгове отнема по-малко време.
И тук е моят собствен подход.
Не казвам, че това е единственият начин да се трасира CSS. Но това е изключително ефективен за мен. Ако CSS не е основен език, а след това му отстраняване на грешки може да изглежда малко по-загадъчна за вас; следните насоки може да бъде много по-ефективно да се борим и да се отървете от бъговете.
Като цяло, аз споделям процеса на отстраняване на грешки в три етапа:
- Оценка и бързи решения
- Локализация и възпроизвеждане
- Причини и ректификация
Нека да разгледаме всяка стъпка и след бърза една CSS-Нека да разгледаме проблема за пример.
Оценка и бързи решения
Много бъгове лесно да се определи, ако знаете и дълбоко разбиране на CSS (например, защото те работят с него постоянно). В противен случай, бързо решение на вашия арсенал ще бъде по-малко.
Ето и някои от най-често срещаните проблеми, които е вероятно познат на всеки опитен CSS-разработчик:
- Странно пространство около изображението? Помолете го да се покаже: блок (изображението по подразбиране низа, така пространства се взема под внимание).
- елемент се държи правилно в потока? Вероятно някъде настроен обвивка (поплавък).
- абсолютно позициониран елемент не се яви или е на грешното място или за друг елемент? Най-вероятно сте забравили да настроите позицията майка елемент, или случайно се създаде контекст наслагване на Z-индекс, като се използва или преобразувание на непрозрачност.
- псевдо не се появи? трябва да добавите всяка стойност вероятно имот съдържание.
Такива "бръмбари" много. Но това не са реални грешки, разработчиците просто не разбират напълно какво прави браузъра. По-точно: че си CSS код казва на браузъра да се направи.
По-опитните разработчици вече знаят какви проблеми можете да очаквате от тези функции, CSS, и така за тях това е "бръмбари", с който можете бързо да се справят. Те незабавно да признае проблем, за разлика от разработчиците с много по-малък обем на CSS-знание. Важно е да се разбере, че разработчик ще трябва да превключите към отстраняване на грешки на "техника", отколкото други.
Но едва ли може предизвикателства решени чрез добавяне на различни свойства и стойности на случаен принцип с надеждата резултати. Дори и ако имате късмет и проблемът ще бъде решен, а не на факта, че вие ще бъдете в състояние да определи какъв е проблема и защо реши тя.
Вместо това, в трудни ситуации трябва да се определи проблемната област и буквално копира оформлението на DOM, и след това да се премине към следващия етап на отстраняване на грешки: локализиране и възпроизвеждане.
Локализация и възпроизвеждане
На този етап, CSS отстраняване на грешки много полезни услуги като Codepen. В действителност, ние трябва да се изолират проблема - да получите специален код, участващи в грешката. Това ви позволява бързо да се изолира бъг и се съсредоточи върху основната причина.
За чистотата на експеримента, в този минимален пример трябва да получите само HTML и CSS, което е важно, за да възпроизведе проблема. Можете да набирате стилове, за да отбележи отново, или да копирате минимална част от реалния CSS, свързани с делото. Ако е възможно, опитайте се да не се изхвърлят на целия тест CSS; да играе нужда само най-необходимото. Често постепенното добавяне на CSS е достатъчно, за да се идентифицират проблемната област.
Когато видите, че мигновено резултат от всяко действие, често е възможно да забележите, добавяне на собственост или стойност бъг се усеща.
Контрапродуктивен подход ще бъдат изхвърлени в цялата CSS тест случай, изтриване секции парче по парче, и се надявам, че грешката ще се прояви. На практика, смятам, че е малко тромава, но във вашия случай може да бъде различна.
Сега, след като постепенно добавяне / премахване на CSS, ние трябва да получите бърз тест случай, който възпроизвежда проблема и ви помага да научите злополучния парцел / код.
Да предположим, че сме направили тест с минимум CSS, но тя се държи по същия начин като оригиналния проблем код. Също така е полезно. Сега е време да се разделите.
След като валидността на маркировката се проверява, че е полезно да "се отърве" от ненужни стилове на браузъра. Ето как:
На първо място, на мястото на всички елементи в маркирането на DIV-а (за блокови елементи) и обхващат-ите (за малки букви), а след това да провери дали елементите са избрани в CSS само класа. Може би дори се наложи да промените всички претоварени селектори тип a.link само върху .link.
Благодарение на неутрален маркиране премахнем всяко поведение браузър стилове / по подразбиране за някои сложни HTML-елементи, които представляват проблем. Това е особено вярно формени елементи (както ще видим в нашия пример).
Причини и лек
Да предположим, че оформлението на опростяване не променя нищо. Независимо от това, проблемът е локализиран и следва логично Сега е необходимо да се провери локализиран сайт в други браузъри. Същият проблем се появи в Chrome, Internet Explorer, Safari и Firefox? Ако не, един от тях разбира, нали? Ако грешката се появява само един браузър, трябва да се намери сред познатите грешки за този браузър.
Това е известен проблем с браузъра или конкретен X X версия на браузъра? Bug отстраним скоро? Има ли някакви известни заобиколни начина, които не оказват влияние върху другите браузъри? В краен случай, можете да добавите код за клон с бъг, за желания браузър?
Грег Vitvorg от Microsoft също споделя някои подробности за субпиксели закръгляването браузъри. WebKit / мигане закръглено до 1/64, гущер - до 1/60 и Edge - (. От фураж "smfr WebKit разработчик) 1/100
Отстраняване на грешки в мобилни платформи
За мобилни устройства, ако имате необходимото физическо устройство, а не само съобщение за грешка от страна на потребителя, а устройството поддържа тази функция, нищо хубаво на "дистанционно" дебъгване на кабела. В тази връзка, голямо Safari със свързаното iPhone (само за Mac), обаче, подобно на Chrome за Android е в двойка с настолен Chrome (Windows и Mac). За IOS, че не е нужно на една ръка разстояние конкретно устройство е доста добър, и Safari дебъгер в тандем с симулатора IOS, но ще бъде ограничено от версия IOS, която поддържа вашата версия на Xcode. На теория, може да има няколко версии на Xcode едновременно, например, един, който поддържа iOS6 и iOS7, а друг, който поддържа iOS8 и 9, но имам това никога не е работил.
И какво, ако трябва да се справят с по-възрастен мобилно устройство? Дистанционно отстраняване на грешки често не е опция тук. За такива случаи е полезно да се развие "нюх", който инструменти за развитие може да помогне за решаване на някои проблеми с показването на платформа.
Например, ако сте се обмисля проблема за старата версия на Safari на IOS (напр. IOS5-6), или във вградения браузър на Android <4.2, полезно знать, что у них общая основа WebKit. На свежих версиях OS X, как отмечено выше, довольно трудно добиться, чтобы симулятор iOS точно воспроизвел эти устройства (симуляторы iOS склонны поддерживать лишь пару последних версий). Более плодотворным подходом может оказаться вовсе даже взять и скачать последнюю версию Safari для Windows (5.x, если память меня не подводит).
Показване на версията на Safari този стар за Windows всъщност е много подобен на тези мобилни платформи, така че дебъгер тя ще вероятно повече, отколкото в най-новата Chrome / Firefox или съществуващ IE. Друг вариант - ако операционната система го поддържа, изтегляне и инсталиране на стария вечер изгради WebKit.
По същия начин, ако имате Mac, като възникнат проблеми на Windows Mobile (8 / 8.1), вземете и изтегляне на виртуална машина с IE10. След това използвайте има дебъгер, като показва на IE10 и мобилен IE8 и 8.1 е много общо помежду си.
В някои браузъри, особено стар мобилен, ако нещо изглежда е грешка - може да се окаже, и те трябва да намерят временно решение би било много по-лесно, ако проучим проблема, където е възможно ", за да нулата" в дебъгер.
изчислената стил
Разработчиците често пренебрегват такава функция дебъгер, стилове панел изчислява. Ако изчислените стилове за новия си продукт, самото име им обяснява - са стилове, които се прилагат към елемента след изчисляването в браузъра. Това е важно, тъй като на практика вградени стилове могат да бъдат различни от тези. че вие сте написали. Нещо повече, сред съществуващите стилове могат да бъдат тези, които не сте пишат. Сега ще обясня това с един пример. Вземете следващата маркиране.
Каква е ширината на външната за вас? Ако мислите, че 400 пиксела, както е посочено в максимална ширина. Щях да съм разбран. Но това не е така. Обърнете внимание на това:?
Какво става? Защо макс ширина не се взема под внимание? Аз ще даде представа. Отворете дебъгер и погледнете в панела "изчислената стил» ( «Изчислените Стилове»).
Аз ви жаля несигурността; По подразбиране fieldset са изчислили, широчината, която регулира съдържанието му. В Chrome, това се показва в «Компютърна Стилове» като новия мин-Content-Length в мин-ширина.
За да поправите това, можете да добавите нова стойност в мин ширина имота. С мин ширина: 0 нашата макс ширина имот ще работи както трябва.
Ето колко полезно може да бъде панел «Изчислените Стилове» на в дебъгер. Не забравяйте, че всичко, което ти пиша не трябва да се изчислява в браузъра.
заключение
Причини за визуални аномалии в интернет са много и разнообразни. Изпълнение на спецификациите са различни, така че всеки браузър не разполага с нейните капризи. В допълнение към натрупването на умствена каталог на "gotchas", методически - най-ефективният подход към проблема. Като цяло, този подход се оказа много ефективен за мен:
Послепис Може също така да се интересуват от:
По-малко от шест месеца след датата на последния промяната в W3C работен процес, тъй като ръководството на консорциума са получили предложение да се прилага този нов процес в крайна сметка по случая. И отписване е без значение HTML спецификация на музея, така че те не са объркани разработчиците ", който се представя за" значение.
Друг CSS модул, което ни казаха тихо падежът на статута, с които W3C съветва да започне рутинното използване на нови продукти. съдържа имот ви позволява да ограничите промяната на чертежа на дърво, прекрояване на CSS-кутии и да промените размера им в рамките на елемента. Ето защо е толкова важно ...
ОЩЕ
От Париж (на снимката), който наскоро премина CSS заседание на работната група, пристигнала забавни новини: Имоти решетка ред дефицит и решетка-колона-празнина, както и намаляването на решетка-празнина ...