CSS3 هي الإصدار الثالث من أوراق الأنماط المتتالية (Cascading Style Sheets - CSS)، وهي لغة تُستخدم لتنسيق صفحات الويب وتحسين مظهرها. جاءت CSS3 بتحديثات وتحسينات كبيرة مقارنة بالإصدارات السابقة (CSS1 وCSS2)، حيث أصبحت أكثر قوة ومرونة في التصميم.

الفرق بين CSS3 والإصدارات السابقة (CSS1 وCSS2):

1. التقسيم إلى وحدات (Modules):

تم تقسيم CSS3 إلى وحدات مستقلة، مما يسمح بتطوير الميزات الجديدة دون الحاجة إلى تحديث اللغة بالكامل.



2. التحكم المتقدم في التخطيط والتنسيق:

Flexbox وGrid: ميزات قوية لإنشاء تصاميم مرنة وسهلة التكيف مع الشاشات المختلفة.

Media Queries: لدعم التصميم المتجاوب (Responsive Design) بناءً على حجم الشاشة أو نوع الجهاز.



3. التأثيرات والأنيميشن:

Transitions: لإنشاء تأثيرات انتقالية سلسة بين حالات العناصر.

Animations: لإنشاء حركات مخصصة دون الحاجة إلى JavaScript.

Transforms: لتدوير وتحريك العناصر (مثل rotate(), scale(), translate()).



4. دعم أكبر للألوان والتدرجات:

دعم الألوان بنظام RGBA وHSLA، مما يسمح بتحديد الشفافية بسهولة.

دعم التدرجات اللونية (linear-gradient, radial-gradient) بدون الحاجة لاستخدام صور.



5. إضافة تأثيرات الظلال:

box-shadow: لإضافة ظل للعناصر.

text-shadow: لإضافة ظل للنصوص.



6. تحسينات على الخطوط والطباعة:

دعم @font-face لاستخدام خطوط مخصصة على الويب.

خصائص جديدة مثل text-overflow وword-wrap.



7. دعم أفضل للنماذج (Forms):

تحسينات على حقول الإدخال، مثل placeholder, required, وvalidity للتحقق من صحة البيانات بدون JavaScript.




لماذا CSS3 مهمة؟

تجعل تصميم المواقع أكثر احترافية وجاذبية.

تقلل من الاعتماد على JavaScript لتحقيق التأثيرات.

تساعد في تحسين تجربة المستخدم على الأجهزة المختلفة.

توفر وقت المطورين بفضل الأدوات المتقدمة.

لغة JavaScript هي لغة برمجة ديناميكية تُستخدم بشكل رئيسي في تطوير الويب لإنشاء صفحات تفاعلية وتحسين تجربة المستخدم. تُعد واحدة من الركائز الثلاثة الأساسية في تطوير الويب بجانب HTML (لبناء الهيكل) وCSS (لتنسيق الشكل).

استخدام JavaScript في تصميم الويب:

1. إضافة التفاعل: تجعل صفحات الويب تفاعلية من خلال التعامل مع الأحداث مثل النقر، والتمرير، والإدخال في النماذج.


2. التعديل على المحتوى ديناميكيًا: يمكن تغيير النصوص، الصور، والألوان دون الحاجة إلى إعادة تحميل الصفحة.


3. إنشاء تأثيرات ورسوم متحركة: مثل القوائم المنسدلة، السلايدرات، والتأثيرات البصرية الأخرى.


4. التحقق من المدخلات: تستخدم لفحص البيانات المدخلة في النماذج قبل إرسالها إلى الخادم.


5. التعامل مع API's: تسمح بجلب بيانات من مصادر خارجية مثل واجهات برمجية لخدمات الطقس أو الأخبار.


6. تصميم واجهات مستخدم متقدمة: من خلال مكتبات وأُطر مثل React.js وVue.js وAngular.

anWriter Free

CSS & HTML & JavaScript Editor

مُرفق إليكم تفاصيل المشروع النهائي للمادة

سيتم شرحه كاملًا مع الأمثلة خلال محاضرات هذا الأسبوع

HTML5 headings from h1 to h6

Front-End Development

الفرق بين Semantic HTML و Non-Semantic HTML


1. Semantic HTML (HTML الدلالي)

يشير إلى العناصر التي تحمل معنى واضحًا يعبر عن محتواها ووظيفتها.

يساعد في تحسين إمكانية الوصول (Accessibility) وتحسين محركات البحث (SEO).

يسهل على المطورين والمتصفحات ومحركات البحث فهم بنية الصفحة.


أمثلة:

<header>العنوان الرئيسي</header>
<nav>روابط التنقل</nav>
<article>مقال</article>
<section>قسم من المحتوى</section>
<footer>التذييل</footer>

2. Non-Semantic HTML (HTML غير الدلالي)

لا يعطي أي دلالة عن محتواه، بل يعتمد فقط على الشكل والتنسيق.

يحتاج المطورون إلى إضافة class أو id لشرح وظيفته.

يصعب فهمه بالنسبة لمحركات البحث والأشخاص ذوي الاحتياجات الخاصة.


أمثلة:

<div class="header">العنوان الرئيسي</div>
<span class="nav">روابط التنقل</span>
<div class="article">مقال</div>
<div class="footer">التذييل</div>