اعتبارسنجی به بررسی کد 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 بررسی کنید، باید این را به صراحت مشخص کنید. برای این کار روی متن کلیک کنید ویژگی های اضافی"و در بلوکی که باز می شود، از لیست "Profile"، CSS2.1 را انتخاب کنید (شکل 20.4).

برنج. 20.4. تعیین نسخه CSS برای بررسی

پس از ایجاد سایت و پر کردن آن با تمام موارد لازم، سایت باید از نظر خطا بررسی شود. برای یافتن خطاهای املایی در html و css، اعتبار سنجی W3 به شما کمک می کند - کنسرسیوم وب جهانی، که در ترجمه: کنسرسیوم وب جهانی. تمام خطاها را پیدا می کند و مکان آنها را نشان می دهد و همچنین گزینه هایی برای حذف آنها ارائه می دهد.

چرا کد را با W3C Validator تعمیر کنید

در واقع، مزایای زیادی از این وجود ندارد و همه آنها مشروط هستند، اما متأسفانه هر سایتی باید حداقل تعداد خطا داشته باشد، در حالت ایده آل هیچ خطای وجود ندارد. چه تصمیمی می گیرید که آیا به آن نیاز دارید یا خیر، در اینجا مزایای آن وجود دارد:

  • سرعت بارگذاری صفحه افزایش می یابد، اما کمی، حتی قابل توجه نخواهد بود.
  • سایت در هر مرورگر یکسان نمایش داده می شود.
  • هنگام افزودن سایت به دایرکتوری به سواد نوشتن html و css توجه کنید.

نکات مثبت زیادی نیست، اما اصلاح کنید خطاهای html و cssاستفاده از اعتبارسنجی W3C ارزش آن را دارد!

نحوه رفع خطاها با Validator

اصل تصحیح خطاها با اعتبارسنجی پیچیده نیست و همه می توانند از عهده آن برآیند! ما پیوندها را دنبال می کنیم، اگر درک انگلیسی دشوار است، به شما توصیه می کنم از مترجم استفاده کنید، یا استفاده کنید این، که نوع خطاها را به زبان روسی نشان می دهد. نمونه ای از اصلاح توسط یک اعتبار سنج را در نظر بگیرید:

1. نام سایت خود را به طور کامل تایپ کنید.


2. در لیست، ما شروع به بررسی محل و نوع خطا و آنچه برای رفع آن نیاز است، می کنیم.


همانطور که در تصاویر مشاهده می کنید اشتباه من در لینک است، این مشکل را در افزونه دکمه های اشتراک گذاری پیدا کردم. اغلب شما باید تمام فایل ها را جستجو کنید تا یک خطا پیدا کنید.

3. یک عنصر را به خطی که خطا پیدا شد اضافه کنید و دوباره با اعتبار دهنده بررسی کنید.
اگر اشکال برطرف شد، خوب است. اگر نه، پس باید بیشتر جستجو کنید.

بررسی اعتبار کد وب، بررسی آن در برابر استانداردها و گواهینامه های W3C است.
W3C (کنسرسیوم وب جهانی) قانونگذاران فنی وب هستند که استانداردها و قوانینی را برای نوشتن کد ایجاد می کنند. گواهینامه ها و استانداردهای W3C برای همه کسانی که در وب کار می کنند اجباری است. استانداردهای یکسانی در املای کد مورد نیاز است تا همه برنامه های شبکه در یک فضای زبانی واحد، به زبان های استاندارد ارتباط برقرار کنند و در حین کار با اسناد وب، یکدیگر را درک کنند.
W3C نه تنها استانداردهای وب را ایجاد می کند، بلکه به طور فعال اجرای آنها را ترویج می کند.
W3C دارای خدمات آنلاین برای اعتبارسنجی کدهای HTML/XHTML و CSS است.
بررسی کد در برابر استانداردهای W3C با استفاده از اعتبار سنجی W3C بهترین راه حل است.

خدمات آنلاین رایگان W3C برای بررسی اعتبار کد.
اعتبار سنجی W3C دارای یک ویژگی بصری است رابط شفاف. کار با آنها آسان و ساده است.
این خدمات امکان بررسی در سه حالت را فراهم می کند و بر این اساس فقط سه دکمه دارد:
URL را بررسی کنید
(برای تأیید، باید آدرس هر صفحه از سایت موجود در وب را مشخص کنید)
فایل آپلود شده را بررسی کنید
(برای تایید، باید مسیر فایل در حال بررسی را مشخص کنید)
متن تایپ شده را بررسی کنید
(برای بررسی، باید کد را کپی و جایگذاری کنید تا در پنجره اعتبارسنجی بررسی شود)

دو روش آخر به ویژه هنگام بررسی اسناد وب یا متون واقع در رایانه های محلی مفید هستند. اینها می توانند صفحات وب باشند یا قبلاً از وب دانلود شده اند کامپیوتر محلی، یا توسط موتورهای واقع در سرورهای محلیمانند "دنور". در مورد Denver، شما باید صفحه را از طریق مرورگر به عنوان یک فایل با پسوند html ذخیره کنید و سپس آن را به عنوان یک فایل جداگانه بررسی کنید، یا کپی کنید. منبعصفحات وب را مستقیماً از مرورگر مشاهده کنید و نحوه تایپ متن را بررسی کنید.

نحوه استفاده از اعتبارسنجی آنلاین W3C
با اعتبارسنجی در:
(http://validator.w3.org/ - برای تأیید اعتبار HTML یا XHTML
http://jigsaw.w3.org/css-validator/ - برای اعتبارسنجی CSS)
در پنجره اعتبار سنجی که باز می شود، یکی از سه روش تأیید را انتخاب کنید
(url صفحه وب، فایل محلی یا متن تایپ شده)
به تب مناسب بروید
موضوع تأیید را مشخص کنید
(آدرس url صفحه وب بررسی شده را وارد کنید،
یا مسیر فایل در رایانه محلی،
یا به ترتیب کدی را که باید بررسی شود قرار دهید)
روی دکمه "بررسی" کلیک کنید و به نتیجه بررسی نگاه کنید

سرویس‌های W3C کد را از نظر اعتبار بررسی می‌کنند و در صورت وجود، فوراً به خطاها اشاره می‌کنند. هر خطا نظر داده خواهد شد. نظرات، متاسفانه، به زبان انگلیسی. بنابراین، Google-translate کمک می کند. فقط در صورت لزوم، اصلاح کد و بررسی مجدد آن برای مطابقت باقی می ماند.
اعتبار سنجی W3C کاملاً رایگان و خودکار هستند. بنابراین، می توانید آنها را با کار خود بر روی اشتباهات برای مدت طولانی و بدون مجازات چکش کنید. برای این کار، این خدمات ایجاد شده است.

یک جایگزین معمولی برای اعتبار سنجی W3C.
علاوه بر سرورهای آنلاین W3C برای بررسی کدهای وب، بسیار نتیجه خوبپسوند HTML Validator را به مرورگر می دهد موزیلا فایرفاکس. وجود چنین افزونه ای در مرورگر کار مدیر وب سایت را تسهیل می کند و بار دیگر ثابت می کند که موزیلا فایرفاکس یک مرورگر "سکان" است.
می توانید پسوند mazilka را از اینجا دانلود کنید: http://users.skynet.be/mgueury/mozilla/

شما می توانید پسوند را به این صورت نصب کنید:
- فایرفاکس را راه اندازی کنید.
بعدی: منو - ابزارها - افزونه ها - برنامه های افزودنی.
و به سادگی فایل دانلود شده (پسوند xpi) را در پنجره باز شده بکشید و رها کنید.
پس از آن، افزونه به صورت خودکار نصب می شود.

یا (راه دوم):
- فایرفاکس را راه اندازی کنید.
بعد: منو - فایل - باز کردن فایل - مسیر فایل دانلود شده را مشخص کنید.
پس از آن، پسوند، دوباره، به طور خودکار نصب خواهد شد.

پس از اتمام نصب، باید مرورگر خود را مجددا راه اندازی کنید.
هنگام راه اندازی مجدد، پنجره ای با انتخاب روشی برای بررسی صفحات وب ظاهر می شود:
"HTML Tidy" یا "SGML Parser" یا "Serial"
ما روش "SGML Parser" را به عنوان راحت ترین و قابل قبول ترین گزینه انتخاب می کنیم. دکمه مربوطه را فشار می دهیم اکنون در پنجره مرورگر نماد میانبر افزونه و در کنار آن دکمه منوی تنظیمات افزونه نمایش داده می شود.
من - بالا و سمت راست دارم:

اعتبار سنجی HTML برای مرورگر موزیلافایرفاکس به طور کامل اجرا می شود حالت خودکار. نیازی نیست به او نشان داده شود چه چیزی را بررسی کند. تمام اسنادی که در موزیلا فایرفاکس باز می شوند را بررسی می کند. خیلی راحت است. کافی است به رنگ میانبر برنامه نگاه کنید تا متوجه شوید که آیا در سند باز مشکلی وجود دارد یا خیر.
بسته به نتایج بررسی، رنگ نماد می تواند سبز، زرد یا قرمز باشد که به معنی زیر است:
سبز - "بدون خطایی"، همه چیز "اوکی است"
زرد - "بدون خطایی، اما هشدارهایی وجود دارد"
قرمز - "خطاهایی وجود دارد"

هنگامی که روی میانبر کلیک می کنید، پنجره ای باز می شود که حاوی کد منبع صفحه ای است که در حال مشاهده آن هستید، با توضیحات و نظرات در مورد خطاها و هشدارها، در صورت وجود.
تقریبا اینجوریه

این مجموعه شامل یک مجموعه شگفت انگیز است. خدمات آنلاینبرای کار با کدهای CSS همه این خدمات زندگی یک توسعه دهنده وب را بسیار آسان تر می کند. با کمک آنها می توانید یک شبکه CSS برای سایت ایجاد کنید، کد را برای خطاها بررسی کنید، کد را با مرورگرهای مختلف، تولید می کنند سبک های CSSبر اساس سبک های لایه فتوشاپ، کدهای الگو برای پس زمینه ها و گرادیان ها دریافت کنید، CSS را فشرده کنید تا سرعت بارگذاری سایت افزایش یابد. خدمات بسیاری وجود دارد که در کار با فونت ها و نمایش بصری آنها تخصص دارند.

شبکه CSS 1 کیلوبایتی
تنها با تنظیم سه پارامتر، یک شبکه CSS نیز ایجاد می شود. همچنین عرض را بر حسب پیکسل مشخص می کند.

طراح شبکه
خدمات پیچیده تر شبکه CSS به چندین روش پیکربندی شده است. بلوک دوم متنی را تولید می کند که در ستون ها نمایش داده می شود. در خروجی یک قالب CSS و HTML آماده داریم.

CSS Lint
سرویسی برای بررسی کد وب سایت شما برای وجود خطا.

پرایمر CSS
با چسباندن کد HTML در کادر محاوره ای، می توانید لیستی از تمام کلاس ها و شناسه های ذکر شده در CSS دریافت کنید.

پیشوندMyCSS
اگر وارد شوید منبع cssکد، و در خروجی می توانید یک کد سازگار برای مرورگرهای مختلف دریافت کنید.

مدرنیزر
این سرویس دانلود و نصب را ارائه می دهد کتابخانه جاوا اسکریپتمنبع باز که به نوعی به شما در ایجاد سایت کمک می کند. نمی توانم با اطمینان بگویم چون خودم آن را امتحان نکردم.

سبک های لایه
بسیار خدمات مفید. بر اساس تنظیمات در کادر محاوره ای Layer Styles، فتوشاپ کد CSS را تولید می کند.

نهایی گرادیان CSSژنراتور توسط ColorZilla
تعداد زیادی گرادیان برای انتخاب و آنها وجود دارد کدهای CSSسازگار برای مرورگرهای مختلف

spritebox
به شما امکان می دهد تا به سرعت و به راحتی کلاس ها و شناسه ها را از یک تصویر واحد ایجاد کنید

داخلی css خودکار
به طور خودکار تمام سبک های محلی را به CSS درون خطی برای استفاده در لیست های پستی تبدیل می کند.

تستر نوع
به شما امکان می دهد املای فونت های مختلف را مقایسه کنید و کد CSS سبک نوشتاری انتخاب شده را دریافت کنید.

ترکیب کننده فونت وب
این سرویس به شما امکان می دهد تا به صورت بصری ببینید که چگونه ترکیبات مختلف فونت ها در عنوان ها، زیرعنوان ها و در متن اصلی به نظر می رسند.

اخیراً چند سؤال از کاربران در مورد اعتبار تم ها و اعتبارسنجی به طور کلی دریافت کرده ام. در این پست می خواهم به آنها پاسخ دهم.

اعتبار چیست؟


اعتقاد بر این است که اعتبار کد یک ویژگی واحد و جهانی هر کد است.
در واقع اعتبار انطباق است کد htmlمستند به مجموعه خاصی از قوانین مشخص شده در doctype یا ضمنی در HTML5.
یعنی اعتبار یک مفهوم نسبی است، زیرا قوانین و الزامات آنها متفاوت است.
برای واضح تر شدن، مثالی را که در سایت css-live.ru پیدا کردم، می زنم:

SNiP های مختلف (کدها و قوانین ساختمانی) برای ساخت ساختمان های مسکونی و نیروگاه های هسته ای اعمال می شود، بنابراین سندی که طبق یک مجموعه قوانین معتبر است ممکن است بر اساس دیگری (نیروگاه هسته ای ساخته شده بر اساس استانداردهای) معتبر نباشد. یک ساختمان مسکونی خوب خواهد بود!).

Doctype معمولاً به سندی اشاره می‌کند که اعتبارسنجی html بر اساس آن برنامه‌ریزی شده است، اما ممکن است به دلایل عملی برای انتخاب حالت بهینه مرورگرها انتخاب شود.
XHTML5 ممکن است اصلاً doctype نداشته باشد، اما معتبر باشد.

اعتبار سنجی - چیست؟

به زبان ساده، اعتبارسنجی فرآیند بررسی کد و مطابقت آن با نوع doctype انتخابی (DTD) است.

اعتبار چگونه بررسی می شود؟

اعتبار کد HTML توسط ابزاری به نام اعتبار سنجی بررسی می شود.
معروف ترین اعتبار سنجی w3c https://www.w3.org است.
اعتبار سنجی w3c چندین بررسی کد را انجام می دهد.
اصلی ترین ها:

  1. بررسی خطاهای نحوی:
    مثال از habrahabr.ru/post/101985 :
    اگرچه نحو صحیحی است یک تگ HTML نامعتبر است
    بنابراین بررسی نحو برای نوشتن کدهای HTML خوب بسیار مفید است.
  2. بررسی لانه سازی برچسب:
    AT سند HTMLبرچسب ها باید به ترتیب معکوس باز شدن بسته شوند. این بررسی برچسب های بسته نشده یا نادرست بسته شده را شناسایی می کند.
  3. اعتبار سنجی HTML با توجه به DTD:
    بررسی اینکه چگونه کد با DTD مشخص شده مطابقت دارد - تعریف نوع سند (doctype). این شامل بررسی نام تگ ها، ویژگی ها و تگ های "جاسازی" (برچسب های یک نوع در تگ های نوع دیگر) است.
  4. بررسی عناصر خارجی:
    هر چیزی را که در کد وجود دارد را پیدا می کند اما در doctype نیست.
    به عنوان مثال، برچسب ها و ویژگی های سفارشی.

برای بررسی اعتبار کد CSS، یک اعتبارسنجی css وجود دارد - http://jigsaw.w3.org/css-validator.
اعتبار کد- این نتیجه یک بررسی مکانیکی برای عدم وجود OB رسمی، طبق مجموعه قوانین مشخص شده است.
شما باید درک کنید که اعتبارسنجی یک ابزار است، نه یک ارزش به خودی خود.
طراحان چیدمان باتجربه معمولاً می دانند که کجا ممکن است قوانین اعتبارسنجی HTML یا CSS را نقض کند و کجا نه، و چه چیزی این یا آن خطای اعتبار سنجی را تهدید می کند (یا تهدید نمی کند).
نمونه هایی از زمانی که نه کد معتبرسایت را می سازد:

  • راحت تر و سریع تر - ویژگی های سفارشی برای Javascript/AJAX یا
  • SEO بهینه شده - نشانه گذاری ARIA.

روشن است که اعتبار به اعتبار اعتبار ندارد.
به عنوان یک قاعده، طراحان چیدمان با تجربه قوانین زیر را رعایت می کنند:
- نباید خطای فاحشی در کد وجود داشته باشد.
- موارد جزئی قابل تحمل است، اما فقط به دلایل موجه.
در مورد خطاهای اعتبارسنجی html/CSS:

خطاهای اعتبارسنجی (VFs) را می توان به گروه های زیر تقسیم کرد:

  • OV در فایل های قالب:
    پیدا کردن و تعمیر آنها کار سختی نیست.
    اگر هر یک از خطاهای کوچک به عملکرد بیشتر یا سریعتر سایت کمک کند، می توان آنها را ترک کرد.
  • OV در اسکریپت های شخص ثالث متصل در سایت:
    به عنوان مثال، یک ویجت Vkontakte، یک اسکریپت توییتر یا فایل های ویدیویی YouTube.
    هیچ راهی برای رفع آنها وجود ندارد، زیرا این فایل ها و اسکریپت ها در سایت های دیگر قرار دارند و ما به آنها دسترسی نداریم.
  • قوانین CSS که اعتباردهنده آنها را نمی فهمد:
    اعتباردهنده بررسی می کند که کد سایت با کد خاصی مطابقت دارد نسخه های HTMLیا CSS.
    اگر از قوانین CSS نسخه 3 در قالب استفاده کرده اید و اعتباردهنده نسخه 2.1 را بررسی می کند، آنگاه تمام قوانین CSS3 را خطا در نظر می گیرد، اگرچه اینطور نیست.
  • OV که به طور غیر ارادی باید در سایت رها شود تا نتیجه مطلوب حاصل شود. مثلا:
    • برچسب های noindex معتبر نیستند، اما بسیار ضروری هستند و باید تحمل کنیم.
    • خاکی برای به دست آوردن نمایش صحیح سایت در برخی از مرورگرها، گاهی اوقات باید از هک استفاده کنید - کدی که فقط یک مرورگر خاص آن را درک می کند.
  • خطاهای اعتبارسنجی
    او اغلب هیچ برچسبی را نمی بیند (مثلاً برچسب های بسته شدن) و در مورد OB در جایی که وجود ندارد گزارش می دهد.

به نظر می رسد که در یک سایت کار تقریباً همیشه نوعی OV وجود دارد.
علاوه بر این، می تواند تعداد زیادی از آنها وجود داشته باشد.
به عنوان مثال، صفحات اصلی Google، Yandex و mail.ru هر کدام حاوی چندین ده خطا هستند.
اما، نمایش سایت ها را در مرورگرها خراب نمی کنند و در کار آنها دخالت نمی کنند.
هر آنچه در بالا نوشته شده در مورد موضوعات من صدق می کند.

موضوعات پیچیده عبارتند از:

  • ویژگی های وردپرس (مثلا the_category())، که کد نامعتبر می دهد.
  • خروجی ویدیو از سایت های میزبانی ویدیو مثلاً از یوتیوب و OB های زیادی در کد یوتیوب وجود دارد که نه من و نه شما نمی توانیم روی آنها تأثیر بگذاریم.
  • دکمه ها شبکه های اجتماعیکه با استفاده از اسکریپت های این شبکه ها به هم وصل شده اند و حاوی OB هستند.
  • قوانین CSS3 و HTML5 توسط اعتبار سنجی نسخه های قدیمی باگ در نظر گرفته می شوند.
    در عین حال، اعتبار سنجی نسخه های CSS3 و HTML5 قوانین قدیمی را به عنوان خطا در نظر می گیرند :).
  • گاهی اوقات برای دستیابی به نمایش صحیح در مرورگر اینترنتاکسپلورر یا نسخه‌های قدیمی‌تر مرورگرهای دیگر باید از به اصطلاح هک استفاده کنند - کدی که فقط یک مرورگر خاص آن را درک می‌کند تا بتواند قوانین نمایش سایت را برای آن مرورگر خاص بنویسد.

در نتیجه، شما می توانید یک کد کاملاً معتبر را فقط در هنگام طرح موضوعات بسیار ساده دریافت کنید. آنهایی که دارای حداقل عملکرد هستند.
پس از اتمام طرح‌بندی هر یک از موضوعاتم، همیشه آن را با یک اعتبارسنجی بررسی می‌کنم و تمام OB‌هایی را که می‌توان بدون از دست دادن عملکرد موضوع برطرف کرد، اصلاح می‌کنم.
یعنی اگر بین یک کارکرد و اعتبار انتخابی وجود داشته باشد، من عملکرد را انتخاب می کنم.
اگر مضامین خود را می سازید، به شما توصیه می کنم همین کار را انجام دهید.
از دیدگاه من (و همچنین از دیدگاه اکثر طراحان صفحه‌آر)، نگرش به اعتبارسنجی html/CSS به عنوان حقیقت نهایی اشتباه است. تصحیح فقط آن دسته از OB ها الزامی است که:
- جلوگیری از نمایش صحیح صفحه توسط مرورگر (تگ های بسته نشده و نادرست تو در تو).
- کاهش سرعت بارگذاری صفحه (اسکریپت های متصل نادرست).
- می توان بدون ایجاد مزاحمت در عملکرد تم، رفع شد.
امیدوارم به تمام سوالات شما در مورد اعتبارسنجی پاسخ داده باشم.