Css оформление за различни браузъри. Набор от CSS3 свойства за различни браузъри

Първият файл, който се появи, беше reset.css. Този css файл съдържа списък с всички възможни html тагове и нулира стойността им. Тоест, премахва всички възможни отстъпи, прави шрифта еднакъв във всички тагове, нулирайки всички текстови стилове. Така че всички заглавия и параграфи се показват в обикновен текст, с еднакъв размер и без отстъп. В резултат на това получаваме нулиране на стиловете по подразбиране във всички браузъри.

Работи по следния начин: първо включваме файла reset.css на страницата, а след него нашия собствен файл със стилове. В резултат на това първо нулираме всички стилове и едва след това задаваме дизайна на html таговете в style.css. По този начин постигаме, че всички браузъри ще възстановят стиловете си по подразбиране и всички маркировки ще бъдат базирани на стиловете, които сме задали в style.css.

Можете да изтеглите reset.css от cssreset.com

Или можете да изтеглите версията 2.0 „Reset CSS“ на Ерик Майер, като използвате бутона по-долу от моя блог:

След като reset.css се свърже със страницата, всички стилове трябва да бъдат пренаписани. И всеки път тази дейност става уморителна. Следователно нулирането беше заменено с друг инструмент - нормализиране. Normailze - както подсказва името, не нулира всички стилове, но ги нормализира, привеждайки ги в единен вид във всички браузъри. След прилагането му основните стилове за показване на заглавия, размери на шрифтове, отстъпи... са унифицирани и се показват еднакво във всички браузъри. Използвайки го, можете да спестите известно време, което в случай на нулиране би било изразходвано за писане на стилове за нулиране.

Ако все още не сте използвали normalize.css, препоръчвам да го изпробвате в следващия си проект и кой знае, може би няма да можете да го откажете 😉

Можете да изтеглите normalize.css от necolas.github.io/normalize.css

Или изтеглете от моя блог:

Няма ясен отговор.

Първият нулира всички стилове, вторият води до един знаменател. Опитните дизайнери на оформление, които използват reset.css, обикновено имат свои собствени набори от стилове, които се включват веднага след нулирането, за да стилизират съдържанието. И не им се налага да дефинират отново стилове за основни елементи всеки път в ново оформление. Това правя и аз. Чувствам се удобно и знам какви стилове съм задал по подразбиране и как работят.

normalize е удобно, ако проучите структурата му, можете да го промените според вашите нужди - като коригирате основния вид на таговете. И работата с него също ще бъде удобна в движение - когато трябва да правите много набор и често.

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

Съвместимостта между различни браузъри е способността на уебсайта да се показва правилно в различни браузъри. Ресурсът трябва да работи еднакво във всички версии на браузъра.

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

Преди това дизайнерът създаваше оформление на дизайна във Photoshop, което след това се прехвърляше в HTML и CSS. Днес технологичните промени ни карат да преосмислим тази концепция. Вече не можем да предвидим кой браузър, резолюция или устройство ще се използва за преглед на сайта. Отминаха дните, когато повечето компютри използваха фиксирана разделителна способност от 1024 на 768 пиксела, а сайтовете можеха да бъдат проектирани със статични размери.

Съвременните браузъри поддържат напълно HTML5 и CSS3. Но един и същи HTML/CSS/JavaScript код се интерпретира по различен начин в по-старите браузъри, което води до „несъвместимост на различни браузъри“ на сайта. Това важи особено за по-старите версии на Internet Explorer.

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

Световната статистика за 2015 г. показва, че 14-те най-използвани разделителни способности на екрана варират от 1920 на 1080 до 320 на 480 пиксела.

Въпреки че Windows 7 (31,20%) все още държи голям пазарен дял, мобилните платформи започват да изместват традиционните настолни платформи.

Разглеждайки статистиката за 2015 г. за използваните браузъри, виждаме, че на първо място е Chrome (всички версии – 44,87%), на второ – Firefox (всички версии – 10,37%), на трето – Internet Explorer 11 (6,84%).

Ускореният темп на пускане на нови версии на Google Chrome и Firefox ни позволява по-ефективно да разработваме проекти за тези платформи. Малко по-различна картина се очертава за „лошия“ Internet Explorer, тъй като старите му версии все още могат да бъдат намерени в интернет. А това води до проблеми с крос-браузърната съвместимост на сайта.

Microsoft спря поддръжката на IE6 на 8 април 2014 г. А от 2016 г. ще се поддържа и актуализира само най-новата версия на Internet Explorer. Това на практика означава, че поддръжката за IE7 и IE8 беше напълно прекратена в началото на 2016 г., независимо от операционната система. IE9 ще се поддържа само в Windows Vista, IE10 само в Windows Server 2012, IE11 в Windows 7 и Windows 8.1:

Github вече не поддържа IE 7 и 8. Освен това някои от функциите на Twitter не работят в IE8. И накрая, популярната рамка няма да поддържа IE8, като се започне от версия 4.

Статистиката за употреба обаче може да варира в зависимост от региона, като 6,11% от потребителите в Китай все още сърфират в IE8 през 2015 г. Ако вземем предвид, че в Китай е имало приблизително 724 400 000 интернет потребители, може да се разбере, че приблизително 44 200 000 китайци продължават да използват IE8 тази година.

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

Основният принцип тук е следният: колкото по-висока е необходимата кросбраузърна съвместимост, толкова повече време за разработка ще е необходимо, което води до увеличаване на цената на проекта. За да вземете информирано, икономически разумно решение, трябва да си зададете следните въпроси:

• Каква е вашата целева аудитория?
• Към кой географски регион трябва да се насочите?
• Какви браузъри и устройства използват вашите посетители?
• Има ли технически фактори във вашата компания или индустрия, които ви принуждават да поддържате конкретни версии на по-стари браузъри?
• От гледна точка на електронната търговия, какви са процентите на реализация и възвръщаемостта на инвестициите на различните потребителски групи по версия на браузъра?

Отговаряйки на тези въпроси с помощта на статистически данни, например от Google Analytics, можете да получите обективна картина.

Адаптивният уеб дизайн разчита до голяма степен на медийни заявки за модифициране на CSS за различни резолюции на екрана. В допълнение, съвременните уебсайтове се характеризират с използването на HTML5 семантични елементи (например, , , , , ) за групиране на компоненти на дизайна. CSS3 селекторите се използват за избиране на конкретни елементи и след това за присвояване на стилове (например , :checked , :nth-child(n) , :not(selector) , :last-child) ). И накрая, отзивчивата типография често се определя с помощта на REM (root em) единици.

Това ни води до следните технически предизвикателства при внедряването на CSS съвместимост между различни браузъри:

• CSS3 медийни заявки
• HTML5 семантични елементи: не се поддържат в IE6, 7 и 8;
• CSS3 селектори: Не се поддържат в IE6. Поддържа се само частично в IE7 и 8;
• REM единици: не се поддържат в IE6, 7 и 8. Поддържа се само частично в IE9 и 10;
• Ограничение на CSS правилата: IE9 и по-стари поддържат само 4095 CSS селектори. Правилата след 4095-ия селектор не важат.

Горните грешки ще окажат най-голямо влияние върху стратегията, използвана при внедряването на отзивчив дизайн.

Има две основни стратегии за развитие: постепенно опростяване и прогресивно подобряване.

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

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

Този подход за прилагане на съвместимост между различни браузъри включва започване на разработката с проста версия, към която след това се добавят по-сложни елементи. По-старите браузъри ще могат да показват сайта с основно ниво на потребителско изживяване. И нови HTML/CSS/JavaScript функции ще бъдат налични в браузъри, които действително могат да ги използват.

За разлика от това, постепенното опростяване осигурява напълно функционално ниво на UX в съвременните браузъри. И след това постепенно намалява сложността си за по-стари браузъри поради графики, но без да засяга функционалността. Идеята е да започнете да разработвате с най-новите уеб стандарти и след това да се опитате да сведете до минимум проблемите, свързани с по-старите браузъри.

Кой подход ще изберете зависи от личните предпочитания и условията на проекта:

• Прогресивното подобрение осигурява по-голяма стабилност, тъй като можете постепенно да добавяте нови функции към модерните браузъри. Но това изисква по-внимателно планиране;
• Някои разработчици твърдят, че няма смисъл да се поддържат остарели браузъри и трябва да се използват най-новите технологии. Поддръжката на модерни браузъри осигурява много по-добро потребителско изживяване;
• Има схващане, че прогресивното подобрение е мъртво, защото много приложения на JavaScript не работят добре с този подход;
• Уеб достъпността за обществени институции може да е предмет на местни законови изисквания и може да изисква специфичен подход.

С появата на инструменти за откриване на функции като Modernizr, аз лично клоня към използването на постепенно опростяване и черен списък на браузъра, когато разработвам съвместими сайтове.

За да откриете потенциални проблеми с различни браузъри на JavaScript възможно най-бързо, трябва да тествате сайта си в различни браузъри и резолюции по време на разработката. Има различни софтуерни емулатори, които могат да ни помогнат:

• Browserstack е търговска услуга, която предоставя достъп до среда за тестване, където можете да тествате проекта си на повече от 700 настолни браузъра и мобилни устройства, използвайки виртуална машина в облака;
• Виртуални машини на Microsoft - Ако използвате Linux, няма да имате достъп до Internet Explorer. Решение може да бъде изтегляне на изображения на виртуални машини за IE6 в IE11, които след това могат да се използват заедно с Oracle VM Virtualbox или Vagrant за локално тестване;
• Различните резолюции на екрана за конкретен браузър могат бързо да бъдат тествани с помощта на онлайн услугата Screenfly. Използване на приставки за браузър като Window Resizer за Google Chrome или директно в секцията с инструменти за разработчици на Chrome и Firefox.

Обикновено започвам нови проекти, като нулирам CSS с помощта на Normalize.css, което осигурява по-добра съвместимост между различни браузъри при дефиниране на стилове на HTML елементи по подразбиране до Internet Explorer 8. Normalize.css запазва желаните стилове на елементите, нормализира външния им вид и коригира редица грешки и несъответствия в различни браузъри.

Освен това, много наследени браузъри не могат да интерпретират неизвестни HTML елементи и CSS свойства. Когато браузърът срещне част от HTML или CSS, която не разбира, той го игнорира и продължава процеса на изобразяване. Много приложения използват префикси на доставчици, за да добавят нови, експериментални или нестандартни CSS функции, преди да ги внедрят в спецификацията:

// Webkit браузъри като Chrome и Safari -webkit- // Firefox -moz- // Internet Explorer -ms- // Opera -o-

Проблемът е, че префиксите са неудобни за използване и имат много грешки, свързани с тях. Така че използвам приставката CSS Autoprefixer в комбинация с Grunt.

Редовните CSS правила ще бъдат обработени от плъгина и префиксирани въз основа на базата данни „Мога ли да използвам“. Препоръчително е да посочите в конфигурацията версиите на браузърите, които трябва да се поддържат, например:

опции: ( браузъри: ["последните 2 версии", "т.е. >= 8", "Firefox >= 12", "iOS >= 7", "Android >= 4"] )

Като пример разгледайте следния CSS клас:

Пример ( фоново изображение: линеен градиент (горе вляво, #4676dd, #00345b); дисплей: гъвкав; преход: 1s всички; )

Използвайки CSS Autoprefixer, той се преобразува в:

Пример ( фоново изображение: -webkit-линеен градиент(горе вляво, #4676dd, #00345b); фоново изображение: -moz-линеен градиент(горе вляво, #4676dd, #00345b); фоново изображение: линеен- градиент (горе вляво, #00345b); дисплей: -ms-flexbox: 1s all;

Ако трябва да създадете резервен CSS или да активирате JavaScript за различни браузъри за по-стари версии на Internet Explorer, можете да използвате условни коментари. Те се поддържат в Internet Explorer 5-9, използват HTML синтаксис за коментари в комбинация с булеви стойности. В зависимост от булевата стойност (истина или невярно), кодът в етикетите за коментари ще бъде показан или скрит в съответните версии на браузъра:

КОД, КОЙТО ЩЕ БЪДЕ ИЗПЪЛНЕН // ако Internet Explorer // ако НЕ Internet Explorer // ако Internet Explorer 7 // ако НЕ е Internet Explorer 7 // ако Internet Explorer 9 или ПО-НИСКА // ако Internet Explorer 7 или ПО-ВИСКА // ако Internet Explorer 6 ИЛИ 7 // ако е ПО-ВИСКО Internet Explorer 6, НО ПОД 9

Кодът се скрива автоматично във всички браузъри, които не поддържат условни коментари. Ясен пример за това как условните коментари могат да се използват ефективно на практика е HTML5 Boilerplate, който добавя специфични CSS класове за наследени версии на Internet Explorer:

Техническите несъответствия на наследените браузъри за адаптивен уеб дизайн могат да бъдат коригирани с помощта на полифил. Това е част от JavaScript код, който "запълва" специфична функционална празнина между наследен браузър и функция. Има редица полифили, които могат да се използват за осигуряване на поддръжка на браузъра за HTML5 функции.

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

• respond.js - имплементира CSS3 медийни заявки за Internet Explorer 6 - 8;
• html5shiv позволява използването на HTML5 семантични елементи в Internet Explorer 6 - 8;
• selectivzr - емулира CSS3 селектори и псевдо-класове в Internet Explorer 6 - 8. Пълната поддръжка изисква или Mootools 1.3, или NWMatcher 1.2.3. Частична поддръжка е налична с JQuery 1.3/1.4;
• REM-unit-polyfill - Определя дали браузърът поддържа rem единици и предоставя резервен вариант. Работи с IE8 и по-стари версии.

За да използвате посочените полифили, те трябва да бъдат добавени от CDN или като файл в правилния формат в условните коментари в раздела (не забравяйте да включите една от JavaScript библиотеките, необходими за Selectivizr):

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

Библиотеката Modernizr, написана на JavaScript, ще ви помогне да проверите съвместимостта между браузърите на даден сайт: дали конкретна HTML5 или CSS3 функция се поддържа в различни браузъри. Ако функцията не е налична, може да се зареди алтернативен CSS или JavaScript код.

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

Струва си да се отбележи, че Modernizr не добавя липсващи функции към браузъра. Следователно ще трябва да предоставите код от резервен CSS или polyfill.

Първо трябва да изтеглите напълно функционалната сборка. По-късно, когато сте готови да разработите, можете да създадете персонализирана компилация със специфичните функции, които тествате. Всичко, което трябва да направите, е да добавите класа .no-js към HTML тага на вашия сайт и да включите скрипта Modernizr в секцията head след всеки CSS файл:

Modernizr Demo Modernizr Demo

Това е упражнение Modernizr.

Класът .no-js се използва за проверка дали JavaScript е активиран в браузъра на потребителя. Ако е разрешено, Modernizr ще замени .no-js с класа .js. Функцията за тестване на Modernizr анализира дали дадена функция се поддържа в браузъра и генерира серия от класове, които се добавят към HTML елемента. Google Chrome 47.0.2526.111, например, ще върне следните класове обекти.

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

Нека да разгледаме два прости примера за CSS и JavaScript.

Пример за решаване на проблеми с различни браузъри на CSS: проверка за поддръжка на SVG и предоставяне на PNG като резервен вариант

Текущата тенденция е към все по-широко използване на SVG (Scalable Vector Graphics), но тези графики не се поддържат в IE8 и по-стари версии. Ако SVG се поддържа в браузъра, Modernizr генерира CSS клас .svg. Ако SVG не е наличен, инструментът добавя класа .no-svg към HTML. С CSS по-долу браузърите, които поддържат SVG, ще използват обикновения клас .logo, докато браузърите, които не поддържат SVG, ще използват правилата .no-svg:

Лого (фоново изображение: url("logo.svg"); ширина: 164px; височина: 49px;) .no-svg .logo (фоново изображение: url("/logo.png"); ширина: 164px; височина : 49px )

Пример за JavaScript: Дефиниране на border-radius и добавяне на подходящи CSS класове

Закръгляването на ъглите на рамката не се поддържа в IE8 и по-стари версии. Можем да създадем различни CSS класове, които се прилагат в зависимост от наличието на функцията border-radius:

// Клас за браузър с функция border-radius .round-borders ( border-radius: 5px; ) // Клас за браузър без функция border-radius .black-borders ( border: 3px solid #000000; )

Сега можете да използвате JavaScript, за да съхраните целевия идентификатор като променлива и след това да добавите CSS класове чрез условие:

var element = document.getElementById("TestID"); if (Modernizr.borderradius) ( element.className = "round-borders"; ) else (element.className = "black-borders"; )

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

Поради тези разлики в интерпретацията на стойностите на параметрите, често се случва сайтове и уеб интерфейси, които изглеждат добре в браузърите Mozilla Firefox, Opera и Safari, внезапно да започнат да се разминават в браузъра Internet Explorer.

Основата за тези разлики в интерпретацията на CSS в браузъра е липсата на съответствие на браузърите на Internet Explorer преди версия 7 със стандартите за CSS, приети от W3C. Следователно, за успешно оформление без таблица за версии, по-ранни от IE 7, трябва да използвате редица специални конструкции, наречени CSS хакове. Също така е важно да се отбележи, че за други браузъри понякога е необходимо да се използва CSS хак.

Нека да разгледаме как да напишем CSS, който да се интерпретира само от определени типове браузъри:

Съдържание на документа

За да ги използвате се нуждаете от:

Първият пример ще свърже стиловия лист с всяка версия на Internet Explorer, чиято първа цифра е 5:

Като алтернатива можете да посочите, че стиловите таблици се свързват с всяка версия на браузъра, по-малка от 6:

Вместо lt (по-малко тогава - по-малко) можете също да използвате lte (по-малко тогава или e равно на - по-малко или равно), gt (g по-голямо тогава - повече), gte (по-голямо тогава или e равно to - по-голямо или равно на), основното при цялото това разнообразие от възможности е да изберете правилния ред на указване на условните коментари, за да не попаднете в ситуация, в която за някои браузъри групи от условни коментари се пресичат, давайки неочакван резултат.

Ако използвате няколко версии на Internet Explorer на една и съща машина, тогава всички тези версии ще се представят за най-новата инсталирана версия. Това означава, че ако имате инсталиран IE6, но разглеждате страницата с помощта на IE5, този условен коментар ще бъде изпълнен:

Но този условен коментар няма да бъде изпълнен:

За най-точно проследяване на разликите в обработката на CSS от различни версии на IE, безплатната програма IETester, която поддържа всички версии на IE от 5 до 8, работи добре, а за бърза промяна на параметрите на CSS в IE8 чрез натискане на F12, наличен е инструмент за разработчици, напомнящ на FireBug в Mozilla Firefox.

Подобно на декларирането на таблици със стилове, този метод може да скрие HTML код от определени или всички версии на IE. Например текстът „HTML код“ ще се показва във всички браузъри с изключение на IE6, ако го поставите в условен коментар като този:

HTML код

Подобно на условните коментари, IE 5--IE 8 поддържа етикета .... Този етикет ви позволява да скриете информация от потребителите на IE, като по този начин кодът:

Това не е Internet Explorer

Потребителите на IE ще бъдат показани като: Това е Internet Explorer, а потребителите на други браузъри ще бъдат показани като: Това не е Internet Explorer.

Етикетът не е валиден.

За IE всички версии. Ако поставите пред дадено свойство две наклонени черти (//), то ще бъде прието само от браузърите на IE от всички версии. Други браузъри ще игнорират това свойство.

В IE6 е възможно да поставите знак минус (-) или долна черта (_) пред свойство, без IE7 да отговаря на това. Можете също да използвате следната конструкция:

* html .style (...)

Например:

Стил ( фон : червен; /* за нормални браузъри */ //фон : зелен; /* за всички IE */ -фон : син; /* за IE6 */ ) * html .style ( фон : син; /* други метод за IE6 */ )

В този случай фонът ще бъде червен в браузърите Opera и Firefox, зелен в IE7 и син в Internet Explorer 6.

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

За IE7 се използва CSS хак:

*: първо дете+html .style ( ...)

*+html .style ( ...)

html: root .style ( ...) /* това работи и за Safari */

Стил, x: -moz-any-link (...)

За бърза промяна на CSS параметрите във Firefox чрез натискане на F12 е наличен инструментът за разработчици Firebug (изисква предварителна инсталация) - той е най-добрият сред аналозите.