Жарознижуючі засоби для дітей призначаються педіатром. Але бувають ситуації невідкладної допомоги при лихоманці, коли дитині потрібно дати ліки негайно. Тоді батьки беруть на себе відповідальність і застосовують жарознижуючі препарати. Що дозволено давати дітям грудного віку? Чим можна збити температуру у дітей старшого віку? Які ліки найбезпечніші?
Валідацією називається перевірка CSS-коду на відповідність специфікації CSS2.1 або CSS3. Відповідно, коректний код, який не містить помилок, називається валідний, а не задовольняє специфікації - невалідний. Найбільш зручно робити перевірку коду через сайт http://jigsaw.w3.org/css-validator/, за допомогою цього сервісу можна вказати адресу документа, завантажити файл або перевірити набраний текст. Великим плюсом сервісу є підтримка російської та української мови.
перевірити URI
Ця вкладка дозволяє вказувати адресу сторінки розміщеної в Інтернеті. Протокол http: // годі й писати, він буде доданий автоматично (рис. 20.1).
Мал. 20.1. Перевірка документа за адресою
Після введення адреси натисніть на кнопку «Перевірити» і з'явиться одна з двох написів: «Вітаємо! Помилок не виявлено »в разі успіху або« На жаль, ми виявили наступні помилки »при невалидность коді. Повідомлення про помилки або попередження містять номер рядка, селектор і опис помилки.
Перевірити долучення
Ця вкладка дозволяє завантажити HTML або CSS-файл і перевірити його на наявність помилок (рис. 20.2).
Мал. 20.2. Перевірка файлу при його завантаженні
Сервіс автоматично розпізнає тип файлу і якщо вказано HTML-документ, виокремлює з нього стиль для валідації.
Перевірити набраний текст
Остання вкладка призначена для безпосереднього введення HTML або CSS-коду, при цьому перевірці буде підданий тільки стиль (рис. 20.3).
Мал. 20.3. Перевірка введеного коду
Цей варіант видається найбільш зручним для проведення різних експериментів над кодом або швидкої перевіркиневеликих фрагментів.
Вибір версії CSS
В CSS3 додано багато нових стильових властивостей в порівнянні з попередньою версією, Тому проводити перевірку коду слід з урахуванням версії. За замовчуванням в сервісі зазначений CSS3, так що якщо ви хочете перевірити код на відповідність CSS2.1, це слід вказати явно. Для цього клацніть по тексту « Додаткові можливості"І в блоці зі списку« Профіль »виберіть CSS2.1 (рис. 20.4).
Мал. 20.4. Вказівка версії CSS для перевірки
Я вже згадував про те, що існує з точки зору валідності html коду. Це треба робити хоча б час від часу, оскільки валідністьяк html, так і cssсильно впливає на сайту, тобто тотожне відображення вашого ресурсу в різних браузерах (про популярних і кращих веб-браузерах узагальнююча стаття, яка, сподіваюся, допоможе вам зробити вибір на користь одного з них).
Крім того, я вже згадував, незважаючи на те, що пошукові системина даному етапі не враховують помилки CSS і HTML коду при ранжируванні сайтів, в майбутньому все може змінитися і можна отримати ситуацію, коли чудово оформлений, зроблений для людей проект може втратити частину потенційної аудиторії через те, що не пройшов валідацію. Ну ладно, це все лірика, тут кожен для себе вирішує сам, наскільки все важливо.
Я думаю, з моєю думкою ви тепер знайомі, оскільки я пишу цю статтю, а значить вважаю це гідним уваги поряд, наприклад, з такою важливою частиною seo оптимізації як закриття посилань і фрагментів тексту від індексації Google і Яндекс або грамотним використанням.
Гаразд, як то кажуть ближче до справи. Спочатку трохи про CSS. CSS ( Cascading Style Sheets- Каскадні таблиці стилів) є мовою стилів, який визначає відображення HTML документів. Тобто якщо HTML описує вміст сторінки, то CSS форматує це вміст, іншими словами надає йому завершеного вигляду. До речі, для підвищення швидкості сайту корисно буде провести файлів вашої теми.
W3C валідатор: перевірка валідності коду CSS
Тепер перейдемо до того, як здійснити перевірку на валідність того чи іншого документа (сторінки нашого сайту або блогу WordPress). Також, як у разі перевірки HTML коду, скористаємося одним з інструментів. Перейдемо на сервіс валідації CSS:
Як бачите, є три можливості перевірки валідності CSS за допомогою W3C валідатора. До речі, зверніть увагу, що внизу сторінки валідатора є примітка, яка вказує на необхідність перевірки коду HTML на валідність. Тільки обидва правильних коду дають гарантію коректності всього документа. Для перевірки вводимо URL. Наприклад, перевіримо головну сторінку мого блогу:
Підсумок перевірки W3C валідатором щодо помилок CSS коду не можна назвати невтішним, оскільки виявлені всього 2 помилки. Звичайно, ці помилки бувають різними, в кожному конкретному випадку вони викликають різні наслідки. Подивимося, як можна вступити для їх ліквідації. Тут все зручно, оскільки W3C валідатор видає не тільки посилання на документ, який містить некоректний код, але і номер рядка, на якій він розташований. До речі, нижче, після списку попереджень і помилок буде відображено варіант коректного коду CSS, яким можна скористатися:
На сторінці результату перевірки валідності CSS присутнє посилання на документ css.ie, Який розташований в папці теми. Він був створений для досягнення кросбраузерності блогу (однакового відображення в популярних браузерах). Причому саме для різних модифікацій Internet Explorer, Який грішить різними "косяками" в плані перекручування вигляду сайту, особливо його старі версії (IE9 значно краще в цьому відношенні). Кросбраузерність має дуже важливе значення для просування проекту, однак при перевірці виявилося, що в цьому документі присутні властивості, які не відповідають стандартам W3C.
Отже, отримуємо рядки 3 і 12, на яких присутні помилки. Для їх виправлення слід видалити помилку розбору html (filter: expression (document.execCommand ( "BackgroundImageCache", false, true));)і властивість .zoom. Зараз не буду вдаватися в тонкощі програмування і верстки сайтів, зауважу тільки, що властивість expressionдопомагає позбутися від неприємного ефекту мерехтіння фонових зображень, яке відбувається в IE6.
Тобто в браузері, використання якого виходить нанівець, а в наступних версіях цього "Глюка" вже не спостерігається. Відразу скажу, що я деякий час ще буду використовувати це "ліки", до тих пір, поки кількість потенційних відвідувачів, іcпользующіх IE6 не досягне мінімального рівня. Однак для наочності, щоб показати вам, як на це реагуватиме W3C валідатор, я видалю його.
Свойство.zoom, яке встановлює коефіцієнт масштабування елемента, що не є частиною Міжнародного Стандарту W3C, підтримується зовсім старовинними версіями браузерів Opera, Safari, в тому числі IE8(9 версія майже повністю "законослухняна", так що незабаром, сподіваюся, вебмастера будуть звільнені від необхідності використовувати хакі, тобто додаткові коди, що дозволяють досягти максимальної кросбраузерності). Тепер подивимося на документ, який містить невалидность елементи і відкоректуємо його:
Цей документ знаходиться в папці моєї теми Cloudy, я видаляю вищеназвані елементи, які не пройшли перевірку валідності. Далі, в результатах перевірки на валідність, крім помилок, виявилася ще маса так званих попереджень:
Для прикладу я постараюся показати наочно, як позбутися від найпоширеніших з них, ну і попутно, пояснити їх значення. Як бачимо, W3C валідатор попереджає про наявність однакових кольорів для тексту і фону. Треба сказати, що це взагалі-то небажано в будь-якому випадку, оскільки пошукові системи такий стан речей можуть розглядати як приховування інформації, що загрожує серйозними санкціями.
Звичайно, це не завжди так відбувається, проте недооцінювати цю небезпеку не можна. Отже, переходимо безпосередньо до виправлення ситуації. Найкраще скопіювати файл style.cssвашої теми в HTML і PHP редактор notepad ++, про який я розповідав і який спрощує пошук по номеру рядка:
Тепер ми знаємо, де розташовані ці рядки в файлі вашої теми, коригуємо колір, трохи змінивши відтінок. У шістнадцятковій системі квітів #ffffff відповідає білому кольору. Змінюємо його наступним чином: замість останньої f вписуємо d, таким чином отримуємо трохи інший відтінок білого кольору; тепер зміни для користувачів помітні не будуть, проте пошуковики побачать різницю:
Ось приблизно так можна проводити коригування невалидность частин коду CSS сторінок вашого ресурсу. Точно також знаходимо інші ділянки, відмічені попередженнями і які необхідно ісправіть.Что стосується попереджень, що стосуються рядка 483 (таких виявилося, до речі, чимало, близько 10). При перевірці я виявив, що їх причиною є плагін WP Page Numbers, який забезпечує посторінкову навігацію.
Це наштовхнуло мене на деактивацію цього плагіна і стало причиною того, що я нарешті замінив його впровадженням коду, що стало кроком у напрямку до зниження навантаження на сервер. Як тільки виконав це, попередження, що стосувалися порушення валідності коду саме цим плагіном, при повторній перевірці тут же зникли. Після вищеописаних рухів проводимо повторну перевірку валідності CSS за допомогою W3C валідатора:
Тепер ви знаєте, як перевіряти валідність CSS документа (веб сторінці сайту або блогу), вдавшись до допомоги W3С валідатора. Наостанок хотілося б зазначити, що ступінь і частоту перевірки валідності коду CSS кожен для себе вирішує сам, все залежить від обставин, але тим не менш час від часу це треба робити обов'язково, на моє глибоке переконання. Підписуйтесь на оновлення блогу для отримання свіжих матеріалів на e-mail. Потім того дозвольте відкланятися, сподіваюся, розлучаємося ненадовго.
Ласкаво просимо! Ось і підійшли до кінця. Попереду цілий рік плідної роботи, намічено багато цікавих ідей і тепер справа залишається за малим - втілити їх в життя 🙂 Ви можете слідкувати за ходом подій і бачити як свобода думки виражається в дії - достатньо підписатися на блог, запевняю Вас - це не займе багато часу .
Сьогодні я ставлю завдання з'ясувати, чи впливає правильний вихідний код, який пройшов перевірку, на що або і якщо так, то наскільки. І як завжди чекаю Ваших думок з цього приводу в коментарях.
У минулому році я приділив у своїх публікаціях досить багато уваги такому терміну як валідність, прийшов час розібратися які є переваги у валидного HTML. Раніше разом з Вами ми розібрали як перевірити на валідність, а також канали і ще кілька цікавих моментів.
Чотири основні чинники на користь валидного сайту
По-перше, можна зі ста відсотковою упевненістю сказати, що сторінки, які пройшли випробування на міцність валідатором, будуть правильно відображатися в абсолютно всіх сучасних браузерах - а це не менш важливо, ніж. Погодьтеся, не дуже приємно бачити перед собою верстку з перекосом елементами. Та й відвідувач навряд чи вже повернеться на такий блог, на якому його автор зневажливо ставиться до зовнішнім виглядомі.
По-друге, навіть якщо подумати логічно, прибираючи зайві теги та інший «сміття», ми скорочуємо вага сторінки і тим самим зменшуємо час завантаження сторінки, а браузери витрачають менше часу на обробку таких сторінок. Знаєте, є така приказка: «Менше слів, більше діла», якщо її перефразувати і застосувати до сайтобудування, то вийде на зразок «Менше тегів - більше слів».
І це не порожні слова, всі хто коли небудь стикався з проблемами з Яндексом, отримували відповідь від техпідтримки: покращуйте сайт і працюйте над ним. Так наприклад в панелі інструментів Яндекс Вебмайстер можна знайти довідку по розділу, в якій присутні рекомендації по створенню сайтів.
Якщо уважно вивчити даний документ, То в пункті 3 «Верстка» викладено наступне:
Намагайтеся, щоб верстка сторінок відповідала стандартам
По-третє, якщо Ви займаєтеся створенням сайтів на замовлення або просуваєте їх, то напевно повинні знати мови HTMLі CSS, а якщо так, то навіщо навмисно створювати помилки? До того ж, замовники часом ставлять перед виконавцем завдання: використовувати валідний код, відповідно і розцінки будуть набагато вище на виконувану роботу.
І, нарешті, по-четверте, не останню роль відіграє психологічний фактор. Приємно усвідомлювати, що пророблена робота відповідає певні критеріям і стандартам, в нашому випадку стандартам Консорціуму Всесвітньої павутини. А як відомо, психологія - велика річ! Так що не варто її ігнорувати.
Ех, так приємно бачити такий напис 😉
У цій збірці зібрано чудова колекція онлайн сервісівпо роботі з CSS кодами. Всі ці сервіси істотно полегшують життя веб-розробнику. З їх допомогою можна згенерувати CSS сітку для сайту, перевірити код на предмет помилок, адаптувати код під різні браузери, Згенерувати CSS стилі на основі стилів шару фотошопа, отримати коди патернів для бекграунду і градієнтів, стиснути CSS для збільшення швидкості завантаження сайту. Багато сервісів, що спеціалізуються на роботі з шрифтами і їх візуальним представленням.
The 1Kb CSS Grid
Ставлячи за все три параметра, також генерується CSS сітка. А також вказується ширина в пікселях. 
Grid Designer
Більш складний сервіс. Налаштовується CSS решітка за кількома параметрами. У другому блоці генерується текст, який буде відображатися в колонках. На виході маємо готовий CSS і HTML шаблон. 
CSS Lint
Сервіс для перевірки коду вашого сайту на предмет помилок. 
Primer CSS
Вставивши в діалогове віконце HTML код, можна отримати список всіх згаданих класів і ID, які згадані в CSS. 
PrefixMyCSS
Якщо ввести вихідний CSS код, та на виході можна отримати код, адаптований під різні браузери. 
Modernizr
на даному сервісіпропонують завантажити і встановити JavaScript бібліотеку з відкритим кодом, Яка якимось чином допоможе вам при створенні сайту. Точніше сказати не можу, оскільки сама не пробувала, що це таке. 
Layer Styles
дуже корисний сервіс. На підставі налаштувань діалогового віконця стилів шару програми фотошоп генерує код CSS. 
Ultimate CSS Gradient Generator by ColorZilla
Представлено на вибір велика кількістьградієнтів і їх CSS коди, адаптовані під різні браузери. 
Spritebox
Дозволяє швидко і легко створювати класи та ідентифікатори з однієї картинки 
Automatic CSS inliner
Автоматично перетворює все локальні стилі у вбудований CSS для використання в поштових розсилках. 
Typetester
Дозволяє порівнювати написання різних шрифтів і отримати CSS код обраного стилю написання. 
The Web Font Combinator
Сервіс дозволяє наочно побачити як будуть виглядати різні поєднанняшрифтів в заголовках, короткий зміст і в основному тексті.
Всім-всім привіт!
Перевірка валідності коду HTML - потрібна для, адже пошукові роботи бачать виключно HTML-код. З цієї причини, код сайту бажано привести в повний порядок. У цьому нам допоможуть спеціальні онлайн-сервіси, що виконують перевірку коду і вказують конкретно на помилки.
Одним з таких сервісів є валідатор validator.w3.org, він же, напевно, і найкращий. Він повністю англійською, тому у деяких можуть виникнути проблеми при роботі, але Ви не лякайтеся: валідатор покаже Вам і номер рядка, і саму помилку.
Дійсний код - це код, який відповідає всім стандартам.
Для уроку Вам знадобитися наступний матеріал:
Вищезгаданий онлайн-сервіс проводить перевірку HTML коду онлайн на всьому сайті цілком. Вам потрібно просто вказати домен свого сайту і натиснути кнопку "Check", так Ви запустите перевірку HTML-коду сайту.
Також валідатор надає одну дуже цікаву можливість- перевірка файлів сайту з локального комп'ютера. На мій погляд, цей інструмент стане в нагоді тим, хто робить сайти на замовлення. Перед здачею замовлення потрібно все перевірити ще раз, адже хочеться, щоб твоєю роботою були завжди були задоволені. Перевірити файли можна перейшовши на вкладку "Validate by File Upload": 
Як виправити помилки в HTML-коді?
Сервіс Validator W3c вказав мені на дві помилки і зробив 8 попереджень. Спробую їх виправити і за одне покажу Вам як це робиться. 
Виправляємо помилку "Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.) ". Ця помилка говорить мені про те, що в HTML-коді, а саме в тезі
Валідатор також вказує, де саме перебуватиме помилка: 
Таким чином можна знайти і виправити помилки HTML коду. Але сайти складаються не тільки з коду розмітки, але ще і CSS, тому проводимо ще й перевірку каскадних таблиць стилів веб-ресурсу.
Перевірка CSS коду на валідність
У валідаторі W3c також можна перевірити CSS-код на валідність. Зробити це можна за цим посиланням. Принцип роботи все той же: вказуєте URL-сайту, або вибираєте файл на комп'ютері і натискаєте на кнопку "Перевірити".
На відміну від того ж валідатора HTML, валідатор CSS російською.
Помилки і попередження CSS
При перевірці CSS коду на валідність, сервіс видає велику кількість помилок і попереджень. У мене набралося 23 помилки і аж 281 попередження. На перший погляд може здатися, що це дуже багато і може навіть налякати, проте більшість з зазначених помилокі попереджень показуються тільки через те, що сервіс не знає певних властивостей, які застосовуються для різних браузерів.
У моєму випадку, більшість попереджень з 281 - це CSS-властивості для нормального відображення в різних браузерах:
Сервіс позиціонує подібні теги, як "невідоме розширення постачальника". Тому якщо при перевірці своїх CSS-файлів, Ви бачите велику кількість таких помилок, то не лякайтеся. Все нормально.
Перераховувати найбільш поширені помилки і способи їх усунення я не буду, так як рішення у всіх можуть бути різними і потрібно дивитися сам HTML-код, щоб зрозуміти в чому справа.
Якщо Ви не можете усунути якусь помилку, то діліться проблемою в коментарях до уроку, бути може знайдемо рішення разом.
Сподіваюся, що уроки, які виходили впродовж цього тижня були для Вас корисними і допомогли у вирішенні певних проблем.
Ну а зараз, до побачення!
Попередня статтяНаступна стаття
