إعادة ضبط تنسيقات صفحة الويب - CSS Reset

لماذا يجب إعادة ضبط تنسيقات صفحة الويب CSS Rset؟ وأهم التنسيقات لإعادة ضبط (تعيين) صفحة الويب من خلال ملف CSS، ويمكنك تحميل ملف مضغوط (minified) يحتوي على أهم التنسيقات الإفتراضية لصفحة الويب normalize.min.css

لماذا يجب إعادة ضبط تنسيقات صفحة الويب (CSS Reset)؟

نظرا لتعدد برامج تصفح الإنترنت مثل (Internet Explorer, Chrome, Firefox, Opera, ...)، وكل برنامج يقوم بتطبيق التنسيقات الإفتراضية لعناصر الـ HTML، فعلى سبيل المثال تختلف طريقة عرض العنصر input على حسب الإعدادات الإفتراضية لكل متصفح، وقد يختلف أيضا التنسيق من إصدار إلى آخر من نفس برنامج المتصفح، وحتى نضمن عرض محتويات صفحة الويب بطريقة صحيحة (كما تم تصميمها) على كل برامج التصفح، يجب علينا إعادة ضبط التنسيقات الإفتراضية حتى تصبح واحدة على كل برامج التصفح.

يوجد الكثير من القوالب الجاهزة لإعادة ضبط التنسيقات، ومعظمها يقوم بإزالة التنسيقات الإفتراضية من الـ margin, padding, border, line-height، و يجب عليك قبل إستخدام هذه الإعدادات المعدة مسبقا أن تتعرف على تأثير كل محدد (تنسيق)، ويجب أن تقوم بضبط التنسيقات بما يتناسب مع التصميم الخاص بك، وفي التالي سوف أعرض عليك التنسيقات التي أستخدمها في تصميم صفحات الويب، ويمكنك تغيير أي من التنسيقات بما يتناسب مع تصميمك.

CSS

html {
  font-family:sans-serif;
  -webkit-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
  font-size:14px;
  -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}
body {
  /* يمكنك تغيير نوع الخط المستخدم */
  font-family:"Roboto", "Helvetica Neue", "Times New Roman", Oxygen, Ubuntu, Cantarell, sans-serif;
  /* ويمكنك تغيير حجم الخط المستخدم في الموقع */
  font-size:14px;
  color:#333;
  background-color:#fff;
  margin:0;
  line-height:1.42857143;
}
article, aside, details, figcaption,
figure, footer, header, main, menu, nav, section, summary {
  display:block;
}
audio, canvas, progress, video {
  display:inline-block;
  vertical-align:baseline;
  *zoom:1;
}
audio:not([controls]) {
  display:none;
  height:0;
}
[hidden], template {
  display:none;
}
abbr[title] {
  border-bottom:1px dotted;
  cursor:help;
}
b, strong {
  font-weight:bold;
}
dfn {
  font-style:italic;
}
mark {
  color:#000;
  background:#ff0;
}
small {
  font-size:80%;
}
sub, sup {
  position:relative;
  font-size:70%;
  line-height:0;
  vertical-align:baseline;
}
sup {
  top:-.5em;
}
sub {
  bottom:-.25em;
}
svg:not(:root) {
  overflow:hidden;
}
figure {
  margin:0;
}
pre {
  overflow:auto;
}
code, kbd, pre, samp {
  font-family:monospace;
  font-size:1em;
}
button, input, optgroup, select, textarea {
  margin:0;
  font:inherit;
  color:inherit;
}
button {
  overflow:visible;
}
button, select {
  text-transform:none;
}
button, input[type="button"],
input[type="reset"], input[type="submit"] {
  -webkit-appearance:button;
  cursor:pointer;
}
button[disabled], input[disabled] {
  cursor:default;
}
button::-moz-focus-inner, input::-moz-focus-inner {
  padding:0;
  border:0 none;
}
input {
  line-height:normal;
}
input[type="checkbox"], input[type="radio"] {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  padding:0;
}
input[type="radio"][disabled], input[type="checkbox"][disabled],
fieldset[disabled] input[type="radio"], fieldset[disabled] input[type="checkbox"] {
  cursor:not-allowed;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height:auto;
}
input[type="search"] {
  -webkit-box-sizing:content-box;
  -moz-box-sizing:content-box;
  box-sizing:content-box;
  -webkit-appearance:textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance:none;
}
fieldset {
  padding:.35em .625em .75em;
  margin:0 2px;
  border:1px solid #c0c0c0;
}
legend {
  padding:0;
  border:0 none;
}
textarea {
  overflow:auto;
  resize:vertical;
}
input, select, textarea {
  -webkit-box-sizing:content-box;
  -moz-box-sizing:content-box;
  box-sizing:content-box;
}
optgroup {
  font-weight:bold;
}
table {
  border-spacing:0;
  border-collapse:collapse;
}
td, th {
  padding:0;
}
audio, canvas, iframe, img, svg, video {
  vertical-align:middle;
}
ul, ol {
  margin-top:0;
  margin-bottom:10px;
}
ul ul, ol ul, ul ol, ol ol {
  margin-bottom:0;
}
dl {
  margin-top:0;
  margin-bottom:10px;
}
dt, dd {
  line-height:1.42857143;
}
dt {
  font-weight:bold;
}
dd {
  margin-left:0;
}
hr {
  -webkit-box-sizing:content-box;
  -moz-box-sizing:content-box;
  box-sizing:content-box;
  display:block;
  height:1px;
  border:0 none;
  border-top:1px solid #ccc;
  margin:1em 0;
  padding:0;
}
img {
  border:0 none;
  max-width:100% !important;
  display:block;
}
::-moz-selection {background:#b3d4fc;}
::selection {background:#b3d4fc;}
/* الإعدادات الإفتراضية لعناصر النصوص */
h1 {font-size:2.6em;}
h2 {font-size:2.2em;}
h3 {font-size:1.9em;}
h4 {font-size:1.7em;}
h5 {font-size:1.4em;}
h6 {font-size:1.2em;}
h1, h2, h3, h4, h5, h6 {
  line-height:1.35em;
  margin:0 0 0.45em;
}
p {
  font-size:1em;
  margin:0 0 0.45em;
}
/* الإعدادات الإفتراضية لتنسيقات الروابط */
a, a:hover, a:active, a:focus, a:visited, a:link {
  color:#00ade1;
  text-decoration:none;
  background-color:transparent;
  outline:0 none;
}
a:hover, a:active {
  color:#0e4657;
  text-decoration:underline;
}
/* لحل مشكلة الـ float */
.clf {*zoom:1;}
.clf:before, .clf:after {
  display:table;
  content:"";
  line-height:0;
}
.clf:after {clear:both;}

ويمكنك تحميل النسخة المضغوطة normalize.min.css.

أتمنى أن تكون قد إستفدت من هذا المقال، ويمكنك دائما أن تسأل عن أي شيء غير واضح بالمقال، أو تضيف أي تعديل من خلال التعليقات.