دورة CSS3 باللغة العربية في 300 صفحة نلخص 14 فصل من كتاب the book of css3 مقدمة (فصل يحتوى على العديد من النقاط والمواضيع المهمة قبل البدء) Vendor-Prefix Media Query SELECTORS Web Fonts Text Effects and Typographic Styles Multiple Columns Background Image And Decorative Properties Border And Box Effects Color & Opacity Gradient 2D Transformations Transition & Animation 3D Transformations خاتمة www.2nees.com

1. ‫ﺩﻭﺭﺓ‬CSS3
‫ﺗﻘﺪﻳﻢ‬:‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬
‫ﺍﻹﻟﻜﺘﺮﻭﻧﻲ‬ ‫ﺍﻟﺒﺮﻳﺪ‬:nees.com2aneeshikmat@
‫ﺍﻹﻟﻜﺘﺮﻭﻧﻲ‬ ‫ﺍﻟﻤﻮﻗﻊ‬:www.2nees.com
‫ﺍﻟﺮﺣﻴﻢ‬ ‫ﺍﻟﺮﺣﻤﻦ‬ ‫ﷲ‬ ‫ﺑﺴﻢ‬
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

2. aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

3. ‫ﺍﻟﻔﻬﺮﺱ‬
‫ﺍﻟﻤﻘﺪﻣﺔ‬)‫ﻗﺒﻞ‬ ‫ﻣﻌﻠﻮﻣﺎﺕ‬ ‫ﻣﻦ‬ ‫ﺗﺤﺘﻮﻳﻪ‬ ‫ﻟﻤﺎ‬ ‫ﺍﻟﻤﻘﺪﻣﺔ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻹﻁﻼﻉ‬ ‫ﺍﻟﻤﻬﻢ‬ ‫ﻣﻦ‬
‫ﺍﻟﺪﻭﺭﺓ‬ ‫ﺑﻬﺬﻩ‬ ‫ﺍﻟﺒﺪء‬.(
Prefix-Vendor
Media Query
SELECTORS
Web Fonts
Text Effects andTypographic Styles
Multiple Columns
Background Image And Decorative Properties
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

4. ‫ﺍﻟﻔﻬﺮﺱ‬
BorderAnd Box Effects
Color & Opacity
Gradient
DTransformations2
AnimationTransition &
DTransformations3
‫ﺍﻟﺨﺎﺗﻤﺔ‬
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

5. ‫ﺍﻟﻤﻘﺪﻣﺔ‬
‫ﺍﻟﺤﻤﺪ‬‫ﻟ‬‫ﺍﻟﺤﻲ‬،‫ﺍﻟﻘﻴﻮﻡ‬‫ﺍﻟﺒﺎﻗﻲ‬‫ﻭﻏﻴﺮﻩ‬‫ﻻ‬،‫ﻳﺪﻭﻡ‬‫ﺭﻓﻊ‬‫ﺍﻟﺴﻤﺎء‬‫ﻭﺯﻳﻨﻬﺎ‬،‫ﺑﺎﻟﻨﺠﻮﻡ‬
‫ﻭﺍﻣﺴﻚ‬‫ﺍﻷﺭﺽ‬‫ﺑﺠﺒﺎﻝ‬‫ﻓﻲ‬،‫ﺍﻟﺨﺘﻮﻡ‬‫ﺻﻮﺭ‬‫ﺑﻘﺪﺭﺗﻪ‬ِ‫ﻩ‬‫ﻫﺬ‬،‫ﺍﻟﺠﺴﻮﻡ‬‫ﺛﻢ‬‫ﺃﻣﺎﺗﻬﺎ‬‫ﻭﻣﺤﺎ‬
،‫ﺍﻟﺮﺳﻮﻡ‬‫ﺛﻢ‬‫ﻳﻨﻔﺦ‬‫ﻓﻲ‬‫ﺍﻟﺼﻮﺭ‬‫ﻓﺈﺫﺍ‬‫ﺍﻟﻤﻴﺖ‬،‫ﻳﻘﻮﻡ‬ٌ‫ﻖ‬‫ﻓﻔﺮﻳ‬‫ﺇﻟﻰ‬‫ﺩﺍﺭ‬‫ﺍﻟﻨﻌﻴﻢ‬ٌ‫ﻖ‬‫ﻭﻓﺮﻳ‬‫ﺇﻟﻰ‬
‫ﻧﺎﺭ‬‫ﺍﻟﺴﻤﻮﻡ‬.
‫ﺍﻟﻠﻬﻢ‬‫ﺻﻞ‬‫ﻭﺳﻠﻢ‬‫ﻋﻠﻰ‬‫ﻧﺒﻴﻚ‬‫ﻭﺣﺒﻴﺒﻚ‬‫ﻣﺤﻤﺪ‬‫ﺻﻞ‬‫ﷲ‬‫ﻋﻠﻴﻪ‬،‫ﻭﺳﻠﻢ‬‫ﻭﻋﻠﻰ‬‫ﺍﻟﻪ‬
‫ﻭﺻﺤﺒﻪ‬‫ﻭﺳﻠﻢ‬.
‫ﺇﺧﻮﺗﻲ‬‫ﻭﺃﺣﺒﺎﺋﻲ‬‫ﻭﺃﺻﺪﻗﺎﺋﻲ‬،‫ﺍﻟﺮﺍﺋﻌﻴﻦ‬‫ﺃﻋﻮﺩ‬‫ﻟﻜﻢ‬‫ﺍﻟﻴﻮﻡ‬‫ﺑﺪﻭﺭﺓ‬‫ﺟﺪﻳﺪﺓ‬‫ﻭﻣﻬﻤﺔ‬‫ﻓﻲ‬
‫ﻋﺎﻟﻢ‬‫ﺗﺼﻤﻴﻢ‬‫ﺻﻔﺤﺎﺕ‬،‫ﺍﻹﻧﺘﺮﻧﺖ‬‫ﻭﻫﻲ‬CSS3،‫ﻫﺬﻩ‬‫ﺍﻟﺪﻭﺭﺓ‬‫ﺍﻟﺘﻲ‬‫ﺗﻌﺪ‬‫ﻣﻜﻤﻞ‬‫ﻣﻬﻢ‬
‫ﻟﻤﻔﻬﻮﻡ‬‫ﺗﻨﺴﻴﻖ‬‫ﺍﻟﺼﻔﺤﺎﺕ‬‫ﺍﻹﻟﻜﺘﺮﻭﻧﻴﺔ‬‫ﺑﺎﺳﺘﺨﺪﺍﻡ‬‫ﺗﻘﻨﻴﺎﺕ‬‫ﻋﺎﻟﻤﻴﺔ‬،‫ﺟﺪﻳﺪﺓ‬‫ﺗﺴﺒﻖ‬
‫ﺍﻟﻌﺼﺮ‬،‫ﺍﻟﻘﺪﻳﻢ‬‫ﻭﺗﺠﻌﻞ‬‫ﻟﺼﻔﺤﺎﺕ‬‫ﺍﻟﻮﻳﺐ‬‫ﻣﺪﺧﻼ‬،‫ﺟﺪﻳﺪﺍ‬‫ﻭﺍﺑﺪﺍﻋﺎ‬‫ﺃﺳﻤﻰ‬‫ﻭﺃﻋﻠﻰ‬‫ﻣﻦ‬
‫ﺍﻟﻌﺼﺮ‬‫ﺍﻟﺴﺎﺑﻖ‬..‫ﻓﻨﺤﻦ‬‫ﺍﻵﻥ‬‫ﻧﺘﺤﺪﺙ‬‫ﻋﻦ‬‫ﺍﻝ‬CSS3^_^.
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

6. ‫ﺍﻟﻤﻘﺪﻣﺔ‬
‫ﻭﺍﻵﻥ‬,‫ﺑﻤﺎ‬‫ﺃﻧﻨﺎ‬‫ﺳﻨﺘﺤﺪﺙ‬‫ﻋﻦ‬‫ﺍﻝ‬css3،‫ﻓﻴﻨﺒﻐﻲ‬‫ﺃﻥ‬،‫ﻧﻌﻠﻢ‬‫ﺃﻥ‬‫ﺍﻝ‬css3‫ﻫﻲ‬‫ﺍﺻﺪﺍﺭ‬
‫ﺟﺪﻳﺪ‬‫ﻣﻦ‬‫ﺍﺻﺪﺍﺭﺍﺕ‬‫ﺍﻝ‬css..‫ﻭﻋﻨﺪﻣﺎ‬‫ﻛﻨﺎ‬‫ﻧﺘﺤﺪﺙ‬‫ﺑﺎﻟﺴﺎﺑﻖ‬‫ﻋﻦ‬‫ﻣﻔﻬﻮﻡ‬‫ﺃﻭ‬
‫ﻣﺼﻄﻠﺢ‬css،‫ﻓﻜﻨﺎ‬‫ﻧﻘﺼﺪ‬‫ﺍﻝ‬css2. 1.
‫ﻛﻤﺎ‬‫ﺃﻧﺒﻪ‬‫ﺃﻳﻀﺎ‬‫ﺍﻟﻰ‬‫ﻣﻌﻠﻮﻣﺔ‬‫ﻣﻬﻤﺔ‬‫ﺟﺪﺍ‬‫ﻗﺒﻞ‬،‫ﺍﻟﺒﺪء‬‫ﻭﻫﻲ‬‫ﺃﻥ‬‫ﻫﺬﻩ‬‫ﺍﻟﺪﻭﺭﺓ‬
‫ﺳﺘﺘﺤﺪﺙ‬‫ﻋﻦ‬‫ﻣﻮﺍﺿﻴﻊ‬‫ﻣﺘﻘﺪﻣﺔ‬‫ﻓﻲ‬‫ﺍﻝ‬css،‫ﻭﻟﻬﺬﺍ‬‫ﻳﺠﺐ‬‫ﻋﻠﻴﻚ‬‫ﻗﺒﻞ‬‫ﺍﻟﺒﺪء‬‫ﺃﻥ‬
‫ﺗﻜﻮﻥ‬‫ﻗﺪ‬‫ﻭﺻﻠﺖ‬‫ﺍﻟﻰ‬‫ﻣﺮﺣﻠﺔ‬‫ﺇﺗﻘﺎﻥ‬‫ﺍﻟﺘﻜﻮﻳﺪ‬‫ﺑﺎﻝ‬HTML‫ﻭﺍﻝ‬CSS‫ﻋﻠﻰ‬‫ﺃﻗﻞ‬
‫ﺗﻘﺪﻳﺮ‬.
‫ﺍﻟﻤﺘﻄﻠﺒﺎﺕ‬‫ﺍﻟﺴﺎﺑﻘﺔ‬:
HTML:xXI3gl/tt.//goo:http
Css:kBdCC0gl/.//goo:http
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

7. ‫ﺍﻟﻤﻘﺪﻣﺔ‬
‫ﺃﻳﻀﺎ‬‫ﻓﻴﻤﺎ‬‫ﻳﺘﻌﻠﻖ‬‫ﺑﺎﻝ‬css3،‫ﻓﺈﻧﻪ‬‫ﻣﻦ‬‫ﺍﻟﻤﻬﻢ‬‫ﻣﻌﺮﻓﺔ‬‫ﺑﻌﺾ‬‫ﺍﻷﻣﻮﺭ‬‫ﺍﻟﺘﻲ‬‫ﺗﺘﻌﻠﻖ‬
‫ﺑﻬﺎ‬‫ﻓﻲ‬‫ﺍﻟﻤﺎﺿﻲ‬‫ﻭﺍﻟﺤﺎﺿﺮ‬‫ﻭﺣﺘﻰ‬‫ﺍﻟﻨﻈﺮﺓ‬‫ﺍﻟﻰ‬‫ﺍﻟﻤﺴﺘﻘﺒﻞ‬!!
‫ﻧﻌﻢ‬‫ﻓﻼ‬،‫ﺗﺘﻌﺠﺐ‬‫ﻓﻤﺎ‬‫ﺃﺭﻳﺪ‬‫ﺇﺧﺒﺎﺭﻙ‬‫ﺑﻪ‬،‫ﺍﻵﻥ‬‫ﻫﻲ‬‫ﺃﻥ‬css3‫ﻟﻴﺴﺖ‬‫ﻣﺴﺘﻘﺮﺓ‬،‫ﺗﻤﺎﻣﺎ‬
‫ﻭﺃﻗﺼﺪ‬‫ﺑﻬﺬﺍ‬‫ﺃﻧﻬﺎ‬‫ﻣﺎ‬‫ﺯﺍﻟﺖ‬‫ﻓﻲ‬‫ﺣﺮﻛﺔ‬‫ﺗﻄﻮﻳﺮ‬،‫ﻣﺴﺘﻤﺮﺓ‬‫ﻭﺑﻬﺬﺍ‬‫ﻓﻬﻲ‬‫ﻏﻴﺮ‬
‫ﻣﺘﻮﺍﻓﻘﺔ‬‫ﻣﻊ‬‫ﺟﻤﻴﻊ‬‫ﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬‫ﺑﺸﻜﻞ‬،‫ﻣﺒﺎﺷﺮ‬‫ﻓﺈﻣﺎ‬‫ﻗﺪ‬‫ﺗﺤﺘﺎﺝ‬‫ﺍﻟﻰ‬‫ﺍﺳﺘﺨﺪﺍﻡ‬
vendor‫ﻣﺜﻞ‬‫ﺍﻝ‬webkit‫ﻭﻏﻴﺮﻫﺎ‬..‫ﻭﺇﻣﺎ‬‫ﺃﻥ‬‫ﺍﻟﺨﺎﺻﻴﺔ‬‫ﻗﺪ‬‫ﻻ‬‫ﻳﺪﻋﻤﻬﺎ‬‫ﻣﺘﺼﻔﺢ‬
‫ﻣﻌﻴﻦ‬)‫ﻁﺒﻌﺎ‬‫ﺍﻟﻜﻼﻡ‬‫ﻣﻮﺟﻪ‬‫ﺧﺼﻮﺻﺎ‬‫ﺍﻟﻰ‬IE‫ﺍﻳﻴﻴﻪ‬(،‫ﻭﻟﻜﻦ‬‫ﺑﻔﻀﻞ‬‫ﷲ‬
،‫ﺗﻌﺎﻟﻰ‬‫ﺍﻵﻥ‬‫ﺃﻏﻠﺐ‬‫ﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬‫ﺍﻟﺮﺋﻴﺴﻴﺔ‬‫ﻭﺍﻟﺤﺪﻳﺜﺔ‬‫ﺃﺻﺒﺤﺖ‬‫ﺗﺪﻋﻢ‬
‫ﺧﺼﺎﺋﺺ‬‫ﺍﻝ‬css3،‫ﺍﻟﺮﺋﻴﺴﻴﺔ‬‫ﻭﻟﻜﻦ‬‫ﺗﺬﻛﺮ‬‫ﺩﺍﺋﻤﺎ‬‫ﺃﻥ‬‫ﺗﻘﻮﻡ‬‫ﺑﺎﻟﺘﺤﻘﻖ‬‫ﻭﺍﻟﺒﺤﺚ‬
‫ﻫﻞ‬‫ﺗﺪﻋﻢ‬‫ﺧﺎﺻﻴﺔ‬‫ﻣﻌﻴﻨﺔ‬‫ﻣﻦ‬‫ﻗﺒﻞ‬‫ﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬‫ﺃﻡ‬‫ﻻ‬..‫ﻭﻳﻤﻜﻨﻚ‬‫ﻓﺤﺺ‬‫ﻫﺬﻩ‬
‫ﺍﻟﺨﺎﺻﻴﺔ‬‫ﻣﻦ‬‫ﺧﻼﻝ‬‫ﻫﺬﺍ‬‫ﺍﻟﻤﻮﻗﻊ‬animation-com/#feat=css.//caniuse:http..)‫ﻫﺬﺍ‬
‫ﺍﻟﺮﺍﺑﻂ‬‫ﻳﻤﺜﻞ‬‫ﺍﻟﻤﻮﻗﻊ‬‫ﻣﻊ‬‫ﻣﺜﺎﻝ‬‫ﻟﻤﻌﺮﻓﺔ‬‫ﻣﺪﻯ‬‫ﺗﺠﺎﻭﺑﻴﺔ‬‫ﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬‫ﻣﻊ‬‫ﺍﻝ‬
css-animation(...‫ﻓﻤﺜﻼ‬‫ﺳﺘﻼﺣﻆ‬‫ﺃﻥ‬ie8 & ie9‫ﻻ‬‫ﻳﺪﻋﻤﻮ‬‫ﻫﺬﻩ‬‫ﺍﻟﻤﺰﻳﺔ‬-_-...
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

8. ‫ﺍﻟﻤﻘﺪﻣﺔ‬
،‫ﻭﺍﻵﻥ‬‫ﺑﻌﺪ‬‫ﻫﺬﺍ‬‫ﺍﻟﻜﻼﻡ‬..‫ﻧﻨﺘﻘﻞ‬‫ﺍﻟﻰ‬‫ﺟﺰﺋﻴﺔ‬‫ﻣﻬﻤﺔ‬‫ﺟﺪﺍ‬‫ﻭﻫﻲ‬‫ﺃﻥ‬‫ﺍﻝ‬
CSS3‫ﺍﻝ‬ ‫ﻟﻴﺴﺖ‬HTML5
‫ﺍﻝ‬ ‫ﺑﺘﻌﻠﻢ‬ ‫ﺍﻟﺒﺪﺃ‬ ‫ﻗﺒﻞ‬ ‫ﺍﻟﻜﺜﻴﺮﻳﻦ‬ ‫ﺃﻥ‬ ‫ﻫﻮ‬ ،‫ﺍﻟﻨﻘﻄﺔ‬ ‫ﻫﺬﻩ‬ ‫ﺫﻛﺮ‬ ‫ﻭﺳﺒﺐ‬css3‫ﺃﻧﻬﺎ‬ ‫ﻳﻈﻦ‬
html5‫ﻏﻴﺮ‬ ‫ﻭﻫﺬﺍ‬ ،‫ﺍﻵﺧﺮ‬ ‫ﺗﺤﺖ‬ ‫ﺃﺣﺪﻫﻤﺎ‬ ‫ﻳﻨﺪﺭﺝ‬ ‫ﻣﻮﺿﻮﻋﻴﻦ‬ ‫ﺃﻧﻬﻤﺎ‬ ‫ﻳﻈﻦ‬ ‫ﺃﻭ‬
‫ﺃﻳﻀﺎ‬ ‫ﺻﺤﻴﺢ‬) ..‫ﺍﻹﻁﻼﻉ‬ ‫ﻳﻤﻜﻨﻚ‬‫ﺍﻝ‬ ‫ﺩﻭﺭﺓ‬ ‫ﻋﻠﻰ‬5HTML‫ﻫﻨﺎ‬ ‫ﻣﻦ‬(‫ﻭﻻﻛﻦ‬ ،
‫ﺍﻝ‬ ‫ﺑﺎﺳﺘﺨﺪﺍﻡ‬ ‫ﺗﻌﻤﻞ‬ ‫ﺟﺰﺋﻴﺎﺕ‬ ‫ﻭﺟﻮﺩ‬ ‫ﻳﻨﻔﻲ‬ ‫ﻻ‬ ‫ﻫﺬﺍ‬HTML5‫ﺍﻝ‬ ‫ﻭﻳﻜﻮﻥ‬css3‫ﻫﻮ‬
‫ﺍﻟﻤﻄﻠﻮﺏ‬ ‫ﺍﻟﻨﺴﻖ‬ ‫ﺍﻋﻄﺎﺋﻬﺎ‬ ‫ﻋﻦ‬ ‫ﺍﻟﻤﺴﺆﻭﻝ‬...
‫ﺍﻟﻨﻘﻄﺔ‬ ‫ﻟﻬﺬﻩ‬ ‫ﺍﻟﺘﻨﻮﻳﻪ‬ ‫ﻭﺟﺐ‬ ‫ﻭﻟﺬﻟﻚ‬
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

9. ‫ﺍﻟﻤﻘﺪﻣﺔ‬
‫ﻣﻼﺣﻈﺎﺕ‬:
(1‫ﺇﻥ‬‫ﻣﻌﻈﻢ‬‫ﻫﺬﻩ‬‫ﺍﻷﻣﺜﻠﺔ‬‫ﺗﻢ‬‫ﺗﻄﺒﻴﻘﻬﺎ‬‫ﻋﻠﻰ‬‫ﻣﺘﺼﻔﺢ‬‫ﺍﻝ‬Google Chrome‫ﻟﺬﻟﻚ‬‫ﺇﺫﺍ‬
‫ﺃﺭﺩﺕ‬‫ﺍﺳﺘﻌﺮﺍﺽ‬‫ﺍﻷﻣﺜﻠﺔ‬‫ﻓﻴﻔﻀﻞ‬‫ﺍﺳﺘﺨﺪﺍﻡ‬‫ﻣﺘﺼﻔﺢ‬‫ﺍﻝ‬chrome،‫ﻭﺍﻟﺴﺒﺐ‬‫ﻓﻲ‬
‫ﺫﻟﻚ‬‫ﺃﻧﻨﻲ‬‫ﻓﻲ‬‫ﺃﻏﻠﺐ‬‫ﺍﻷﻣﺜﻠﺔ‬‫ﻟﻢ‬‫ﺃﺭﺍﻋﻲ‬‫ﺍﻟﺘﻮﺍﻓﻘﻴﺔ‬‫ﺍﻻ‬‫ﻟﻤﺘﺼﻔﺢ‬‫ﺍﻝ‬chrome‫ﻭﺍﻝ‬
firefox‫ﻋﺎﺩﺓ‬..‫ﺇﺧﺘﺼﺎﺭﺍ‬‫ﻟﺤﺠﻢ‬‫ﺍﻟﺸﻴﻔﺮﺓ‬‫ﺍﻟﺒﺮﻣﺠﻴﺔ‬‫ﻭﺗﻘﻠﻴﻞ‬‫ﺍﻟﻮﻗﺖ‬،‫ﺍﻟﻤﺴﺘﻐﺮﻕ‬
‫ﻣﻊ‬‫ﺍﻟﻌﻠﻢ‬‫ﺃﻧﻪ‬‫ﺳﻴﺘﻢ‬‫ﺍﻟﺸﺮﺡ‬‫ﻋﻦ‬‫ﻛﻴﻔﻴﺔ‬‫ﻣﻌﺮﻓﺔ‬‫ﺍﻟﺘﻮﺍﻓﻘﻴﺔ‬‫ﻷﻱ‬‫ﺧﺎﺻﻴﺔ‬‫ﻣﻦ‬
‫ﺍﻟﺨﺼﺎﺋﺺ‬‫ﻣﻊ‬،‫ﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬‫ﻭﻫﺬﺍ‬‫ﺃﻣﺮ‬‫ﻣﻬﻢ‬.
Chrome: Version 36.0.19‫ﻭ‬FireFox 37.0.1..)‫ﺍﻹﺻﺪﺍﺭﺍﺕ‬‫ﺍﻟﺘﻲ‬‫ﺗﻢ‬‫ﺍﺧﺘﺒﺎﺭﻫﺎ‬(
(2‫ﺇﻥ‬‫ﺍﻟﺨﺼﺎﺋﺺ‬‫ﺍﻟﺘﻲ‬‫ﺗﻢ‬‫ﺫﻛﺮﻫﺎ‬‫ﻫﻨﺎ‬‫ﻓﻲ‬‫ﻣﺠﻤﻠﻬﺎ‬‫ﻫﻲ‬‫ﺧﺼﺎﺋﺺ‬‫ﺍﻵﻥ‬‫ﻣﺪﻋﻮﻣﺔ‬
‫ﻣﻦ‬‫ﺟﻤﻴﻊ‬‫ﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬،‫ﺍﻟﺮﺋﻴﺴﻴﺔ‬‫ﻟﺬﻟﻚ‬‫ﺍﻟﺨﺼﺎﺋﺺ‬‫ﺍﻟﺘﻲ‬‫ﺗﻘﺮﺃﻫﺎ‬‫ﻳﻤﻜﻨﻚ‬
‫ﺗﻄﺒﻴﻘﻬﺎ‬‫ﺑﺈﺫﻥ‬‫ﷲ‬‫ﺗﻌﺎﻟﻰ‬‫ﻓﻲ‬،‫ﻋﻤﻠﻚ‬‫ﺍﻻ‬‫ﺍﺫﺍ‬‫ﻗﻤﺖ‬‫ﺑﺬﻛﺮ‬‫ﺃﻥ‬‫ﻫﺬﻩ‬‫ﺍﻟﺨﺎﺻﻴﺔ‬‫ﻣﺎ‬
‫ﺯﺍﻟﺖ‬‫ﻏﻴﺮ‬،‫ﻣﺪﻋﻮﻣﺔ‬‫ﺑﺎﻹﺿﺎﻓﺔ‬‫ﺍﻟﻰ‬‫ﺫﻟﻚ‬‫ﻳﺠﺐ‬‫ﻋﻠﻴﻚ‬‫ﺍﻟﺘﺤﻘﻖ‬‫ﺑﻨﻔﺴﻚ‬‫ﻣﻦ‬
‫ﺍﻟﺘﻮﺍﻓﻘﻴﺔ‬‫ﻛﻤﺎ‬‫ﻗﻠﻨﺎ‬‫ﺑﺎﻟﻤﻼﺣﻈﺔ‬‫ﺍﻷﻭﻟﻰ‬.
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

10. ‫ﺍﻟﻤﻘﺪﻣﺔ‬
(3‫ﺍﻟﺘﻄﺒﻴﻖ‬‫ﻣﻬﻢ‬‫ﺟﺪﺍ‬،‫ﻟﻸﻣﺜﻠﺔ‬‫ﻭﻟﻜﻲ‬‫ﺗﻘﻮﻡ‬،‫ﺑﺎﻟﺘﻄﺒﻴﻖ‬‫ﻓﺈﻧﻨﻲ‬‫ﺃﻗﻮﻡ‬‫ﺑﻮﺿﻊ‬
‫ﺻﻮﺭﺓ‬‫ﺍﻟﻨﺎﺗﺞ‬‫ﻭﺍﻟﺸﻴﻔﺮﺓ‬‫ﺍﻟﺒﺮﻣﺠﻴﺔ‬‫ﻛﺘﺴﻬﻴﻞ‬‫ﻟﻠﺸﺮﺡ‬‫ﻭﺇﻳﺼﺎﻝ‬،‫ﺍﻟﻤﻌﻠﻮﻣﺔ‬
‫ﻭﺟﻌﻠﻚ‬‫ﺗﻘﻮﻡ‬‫ﺑﺎﻟﺘﻄﺒﻴﻖ‬‫ﺍﻟﻤﺒﺎﺷﺮ‬،‫ﻟﻠﻤﺜﺎﻝ‬‫ﻭﺑﻌﺪ‬‫ﺍﻹﻧﺘﻬﺎء‬‫ﻣﻦ‬‫ﻓﻜﺮﺓ‬‫ﻣﻌﻴﻨﺔ‬‫ﺃﻭ‬
‫ﺟﺰﺋﻴﺔ‬،‫ﻣﻌﻴﻨﺔ‬‫ﺳﺘﺠﺪ‬‫ﺃﻥ‬‫ﺟﻤﻴﻊ‬‫ﺍﻷﻣﺜﻠﺔ‬‫ﺍﻟﺘﻲ‬‫ﺗﻢ‬‫ﺫﻛﺮﻫﺎ‬‫ﻣﻮﺟﻮﺩ‬‫ﻓﻲ‬‫ﺻﻔﺤﺔ‬
html‫ﻣﺮﻗﻤﺔ‬‫ﺑﺎﻟﺘﺴﻠﺴﻞ‬..‫ﻭﻳﻤﻜﻨﻚ‬‫ﺍﻟﺪﺧﻮﻝ‬‫ﺍﻟﻴﻬﺎ‬‫ﻣﻦ‬‫ﺧﻼﻝ‬‫ﺍﻟﻨﻘﺮ‬‫ﻋﻠﻰ‬‫ﻫﺬﺍ‬
‫ﺍﻟﺸﻜﻞ‬
(4‫ﻫﺬﻩ‬‫ﺍﻟﺪﻭﺭﺓ‬‫ﻣﺠﺎﻧﻴﺔ‬‫ﻭﻣﻘﺪﻣﺔ‬‫ﻟﻜﻞ‬،‫ﺷﺨﺺ‬‫ﻭﺃﺳﺘﺜﻨﻲ‬‫ﻣﻦ‬‫ﺫﻟﻚ‬‫ﻣﻦ‬‫ﺳﻴﺘﻌﻠﻢ‬
‫ﺃﻱ‬‫ﺃﻣﺮ‬‫ﻣﻦ‬‫ﻫﺬﻩ‬‫ﺍﻟﺪﻭﺭﺓ‬‫ﻭﻳﺴﺘﺨﺪﻣﻬﺎ‬‫ﻓﻲ‬‫ﻣﻌﺼﻴﺔ‬‫ﷲ‬‫ﺳﺒﺤﺎﻧﻪ‬،‫ﻭﺗﻌﺎﻟﻰ‬
‫ﺍﻟﻠﻬﻢ‬‫ﺇﻧﻲ‬‫ﻗﺪ‬‫ﺑﻠﻐﺖ‬..‫ﺍﻟﻠﻬﻢ‬‫ﻓﺎﺷﻬﺪ‬..
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

11. ‫ﺍﻝ‬cssVendor-Prefix
‫ﻟﻘﺪ‬‫ﺗﻄﺮﻗﻨﺎ‬‫ﻓﻲ‬‫ﺍﻟﻤﻘﺪﻣﺔ‬‫ﺍﻟﻰ‬‫ﻧﻘﻄﺔ‬‫ﻣﻬﻤﺔ‬،‫ﺟﺪﺍ‬‫ﻭﻫﻲ‬‫ﺃﻥ‬‫ﻛﺜﻴﺮ‬‫ﻣﻦ‬‫ﺍﻟﺨﺼﺎﺋﺺ‬
‫ﺍﻟﻤﺴﺘﺨﺪﻣﺔ‬‫ﻟﻢ‬‫ﺗﻌﺘﻤﺪ‬‫ﺃﻭ‬‫ﻟﻢ‬‫ﻳﺘﻢ‬‫ﻣﺮﺍﺟﻌﺘﻬﺎ‬‫ﻭﺗﻄﻮﻳﺮﻫﺎ‬‫ﻟﻠﺘﻮﺍﻓﻖ‬‫ﻣﻊ‬‫ﻣﺘﺼﻔﺢ‬
،‫ﻣﻌﻴﻦ‬‫ﻟﻬﺬﺍ‬‫ﻗﻠﻨﺎ‬‫ﺃﻧﻪ‬‫ﻳﺠﺐ‬‫ﺃﻥ‬‫ﺗﺤﺬﺭ‬‫ﻋﻨﺪﻣﺎ‬‫ﺗﺴﺘﺨﺪﻡ‬‫ﺃﻱ‬‫ﻣﻦ‬‫ﺍﻝ‬‫ﺧﺼﺎﺋﺺ‬‫ﺍﻝ‬
css3..‫ﻭﻗﺪ‬‫ﺫﻛﺮﻧﺎ‬‫ﺃﻳﻀﺎ‬‫ﺃﻧﻪ‬‫ﺑﻌﺾ‬‫ﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬‫ﻟﺘﺪﻋﻢ‬‫ﺧﺼﺎﺋﺺ‬‫ﻣﻌﻴﻨﺔ‬
‫ﺗﺤﺘﺎﺝ‬‫ﺍﻟﻰ‬Vendor..‫ﻭﻫﺬﺍ‬‫ﻫﻮ‬‫ﻣﻮﺿﻮﻋﻨﺎ‬..‫ﻭﺍﻷﻫﻢ‬‫ﻣﻦ‬‫ﺫﻟﻚ‬‫ﻫﻮ‬‫ﺃﻥ‬‫ﺍﻝ‬
vendor‫ﻭﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬‫ﺍﻟﺘﻲ‬‫ﺳﻨﺘﺤﺪﺙ‬‫ﻋﻨﻬﺎ‬‫ﻋﻠﻲ‬‫ﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬‫ﺍﻟﺮﺋﻴﺴﻴﺔ‬‫ﻭﻫﻲ‬
IE(internet explorer)،‫ﻭ‬Google Chrome‫ﻭ‬Firefox‫ﻭﺍﻝ‬Opera‫ﻭﺍﻝ‬Safari..
‫ﻳﺴﺘﺨﺪﻡ‬‫ﺍﻝ‬vendor‫ﺑﺎﻟﺸﻜﻞ‬‫ﺍﻟﺘﺎﻟﻲ‬:-vendor-css3Prop: value;
-o-:‫ﺍﻝ‬vender‫ﺍﻟﺨﺎﺹ‬‫ﺏ‬Opera
-webkit-:‫ﻣﺘﺼﻔﺤﺎﺕ‬‫ﺍﻝ‬webkit‫ﻋﻤﻮﻣﺎ‬‫ﻭﺃﺷﻬﺮﻫﺎ‬‫ﺍﻝ‬chrome‫ﻭﺍﻝ‬safari..
-ms-:‫ﻣﺘﺼﻔﺢ‬‫ﺍﻝ‬IE
-moz-:Firefox
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

12. ‫ﺍﻝ‬cssVendor-Prefix
‫ﻛﻤﺎ‬‫ﻻ‬‫ﺣﻈﺖ‬‫ﺑﺎﻟﺸﺮﻳﺤﺔ‬‫ﺍﻟﺴﺎﺑﻘﺔ‬..‫ﻓﻠﻜﻞ‬‫ﻣﺘﺼﻔﺢ‬vendor‫ﺧﺎﺹ‬‫ﺑﻪ‬‫ﺑﻨﺎﺋﺎ‬‫ﻋﻠﻰ‬
‫ﻧﻮﻉ‬،‫ﺍﻟﻤﺘﺼﻔﺢ‬‫ﻟﻜﻦ‬‫ﺑﺎﻹﺿﺎﻓﺔ‬‫ﺍﻟﻰ‬‫ﻣﺎ‬‫ﺳﺒﻖ‬..‫ﻓﺈﻧﻨﺎ‬‫ﻧﻘﻮﻡ‬‫ﺩﺍﺋﻤﺎ‬‫ﺑﻜﺘﺎﺑﺔ‬
‫ﺍﻟﺼﻴﻐﺔ‬‫ﺍﻟﻘﻴﺎﺳﻴﺔ‬‫ﺑﻌﺪ‬‫ﺍﻝ‬vendors..‫ﻭﺍﻟﺴﺒﺐ‬‫ﻓﻲ‬‫ﻫﺬﺍ‬،‫ﺃ‬‫ﻣﺴﺘﻘﺒﻞ‬‫ﺍﻝ‬css3‫ﻳﺴﻴﺮ‬
‫ﻭﻳﺘﻘﺪﻡ‬‫ﺑﺴﺮﻋﺔ‬..‫ﻭﺑﻬﺬﺍ‬‫ﻧﻀﻤﻦ‬‫ﻓﻲ‬‫ﺍﻟﻤﺴﺘﻘﺒﻞ‬‫ﻋﻨﺪ‬‫ﺍﻻﺳﺘﻐﻨﺎء‬‫ﻋﻦ‬‫ﺍﻝ‬vendor
‫ﺃﻧﻨﺎ‬‫ﻟﻦ‬‫ﻧﺤﺘﺎﺝ‬‫ﺍﻟﻰ‬‫ﺍﻟﻌﻮﺩﺓ‬‫ﻭﺗﻌﺪﻳﻞ‬‫ﺍﻟﻜﻮﺩ‬‫ﺍﻟﻘﺪﻳﻢ‬..)‫ﺷﻐﻠﻚ‬‫ﻳﺴﺘﻤﺮ‬‫ﺑﺎﻟﻌﻤﻞ‬
^_^(،‫ﻭﻋﻠﻰ‬‫ﺃﻱ‬‫ﺣﺎﻝ‬‫ﻓﻬﺬﻩ‬‫ﺍﻟﻔﻜﺮﺓ‬‫ﺃﺻﺒﺤﻨﺎ‬‫ﻧﺸﺎﻫﺪﻫﺎ‬‫ﺍﻵﻥ‬‫ﻭﺃﺛﻨﺎء‬‫ﻛﺘﺎﺑﺘﻲ‬
‫ﻟﻬﺬﻩ‬‫ﺍﻟﺸﺮﺍﺋﺢ‬..‫ﻓﺄﺻﺒﺢ‬‫ﺃﻏﻠﺐ‬‫ﺍﻟﻌﻤﻞ‬‫ﻳﻜﻮﻥ‬‫ﻋﻠﻰ‬‫ﺍﺳﺘﺨﺪﺍﻡ‬‫ﺍﻝ‬vendor
‫ﺍﻟﺨﺎﺹ‬‫ﺑﺎﻝ‬webkit‫ﻣﻊ‬‫ﺍﻟﺼﻴﻐﺔ‬‫ﺍﻟﻘﻴﺎﺳﻴﺔ‬...
‫ﺗﺬﻛﺮ‬‫ﺍﺳﺘﺨﺪﺍﻡ‬‫ﻣﻮﻗﻊ‬can I use‫ﺍﻟﺬﻱ‬‫ﺗﻢ‬‫ﺫﻛﺮﻩ‬‫ﻓﻲ‬‫ﺍﻟﻤﻘﺪﻣﺔ‬‫ﻟﻤﻌﺮﻓﺔ‬‫ﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬
‫ﺍﻟﺘﻲ‬‫ﺗﺪﻋﻢ‬‫ﻛﻞ‬‫ﺧﺎﺻﻴﺔ‬‫ﻭﻫﻞ‬‫ﺗﺤﺘﺎﺝ‬‫ﺍﻟﻰ‬vendor‫ﺃﻡ‬‫ﻻ‬^_^
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

13. ‫ﺍﻝ‬Vendor-Prefix
‫ﻭﺍﻵﻥ‬‫ﻟﻨﺸﺎﻫﺪ‬‫ﻣﺜﺎﻻ‬‫ﺳﺮﻳﻌﺎ‬‫ﻋﻠﻰ‬‫ﺍﻟﻤﻮﺿﻮﻉ‬^_^،‫ﻫﺬﻩ‬‫ﺍﺣﺪﻯ‬‫ﺧﺼﺎﺋﺺ‬‫ﺍﻝ‬css3
‫ﻭﻫﻲ‬‫ﻟﻤﻨﻊ‬‫ﻋﻤﻠﻴﺔ‬‫ﺍﻝ‬copy..
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
-o-user-select: none; /* opera */
user-select: none;
‫ﺍﻝ‬ ‫ﺍﺳﺘﺨﺪﺍﻡ‬ ‫ﻓﻜﺮﺓ‬ ‫ﻭﻳﻮﺿﺢ‬ ‫ﻳﺸﺮﺡ‬ ‫ﺍﻟﻤﺜﺎﻝ‬ ‫ﻫﺬﺍ‬vendor‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺑﺈﺫﻥ‬..
‫ﺍﻟﺨﺎﺻﻴﺔ‬ ‫ﻫﺬﻩ‬ ‫ﺩﻋﻢ‬ ‫ﻟﻔﺤﺺ‬ ‫ﻣﻮﻗﻊ‬ ‫ﺍﻟﻰ‬ ‫ﺑﺎﻟﺪﺧﻮﻝ‬ ‫ﻗﻤﺖ‬ ‫ﺍﺫﺍ‬ ‫ﺃﻧﻪ‬ ‫ﻛﻤﺎ‬..‫ﺍﻝ‬ ‫ﺃﻥ‬ ‫ﺳﺘﺠﺪ‬ie8 –
9‫ﺍﻟﺨﺎﺻﻴﺔ‬ ‫ﻫﺬﻩ‬ ‫ﻳﺪﻋﻢ‬ ‫ﻻ‬..‫ﺍﻟﻰ‬ ‫ﺑﺎﻹﺿﺎﻓﺔ‬opera mini) ..‫ﻛﺘﺎﺑﺔ‬ ‫ﺗﺎﺭﻳﺦ‬ ‫ﺣﺴﺐ‬ ‫ﻭﻫﺬﺍ‬
‫ﺍﻟﺸﺮﺍﺋﺢ‬ ‫ﻫﺬﻩ‬26-1-2015(
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

14. aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

15. Media Query
‫ﻭﺍﻵﻥ‬‫ﻟﻨﺒﺪء‬‫ﻋﻠﻰ‬‫ﺑﺮﻛﺔ‬‫ﷲ‬‫ﻓﻲ‬‫ﺃﻭﻝ‬‫ﻣﻮﺍﺿﻴﻊ‬‫ﺍﻝ‬css3‫ﻭﻫﻮ‬‫ﺍﻝ‬media query
‫ﻳﺘﻮﺍﺟﺪ‬‫ﻓﻲ‬‫ﻋﺼﺮﻧﺎ‬،‫ﺍﻟﺤﺎﻟﻲ‬‫ﻭﻋﻠﻰ‬‫ﺷﺒﻜﺔ‬‫ﺍﻻﻧﺘﺮﻧﺖ‬‫ﺍﻟﻌﺪﻳﺪ‬‫ﻣﻦ‬،‫ﺍﻟﻤﻮﺍﻗﻊ‬‫ﻫﺬﻩ‬‫ﺍﻟﻤﻮﺍﻗﻊ‬
‫ﻓﻲ‬،‫ﺍﻟﺴﺎﺑﻖ‬‫ﻛﺎﻧﺖ‬‫ﻣﺼﻤﻤﺔ‬‫ﺧﺼﻴﺼﺎ‬‫ﻷﺣﺠﺎﻡ‬‫ﺍﻟﺸﺎﺷﺎﺕ‬‫ﺍﻟﻄﺒﻴﻌﺔ‬‫ﻣﺜﻞ‬‫ﺷﺎﺷﺔ‬‫ﺍﻟﻼﺏ‬
‫ﺗﻮﺏ‬‫ﺃﻭ‬‫ﺷﺎﺷﺔ‬‫ﺍﻟﻜﻮﻣﺒﻴﻮﺗﺮ‬..،‫ﻭﻫﻜﺬﺍ‬‫ﻟﻜﻦ‬‫ﻣﻊ‬‫ﺗﻄﻮﺭ‬‫ﺍﻟﺘﻜﻨﻮﻟﻮﺟﻴﺎ‬‫ﻭﻅﻬﻮﺭ‬‫ﺍﻟﻌﺪﻳﺪ‬
‫ﻣﻦ‬‫ﺍﻷﺟﻬﺰﺓ‬‫ﺍﻟﻤﺨﺘﻠﻔﺔ‬،‫ﻭﺍﻟﻤﺘﻨﻮﻋﺔ‬‫ﺃﺻﺒﺢ‬‫ﻣﻦ‬‫ﺍﻟﻤﻬﻢ‬‫ﺍﻷﻫﺘﻤﺎﻡ‬‫ﺑﺄﻣﻮﺭ‬‫ﻫﺬﻩ‬
،‫ﺍﻷﺟﻬﺰﺓ‬‫ﻭﺧﺼﻮﺻﺎ‬‫ﺑﺤﻠﻮﻝ‬‫ﺍﻷﺟﻬﺰﺓ‬‫ﺍﻟﺬﻛﻴﺔ‬‫ﻭﺍﻟﺘﺎﺑﻠﻴﺖ‬‫ﻣﺤﻞ‬‫ﺍﻟﺸﺎﺷﺎﺕ‬‫ﺍﻟﻜﺒﻴﺮﺓ‬
‫ﻷﻏﺮﺍﺽ‬،‫ﺍﻟﺘﺼﻔﺢ‬‫ﻭﺫﻟﻚ‬‫ﻷﺳﺒﺎﺏ‬‫ﻛﺜﻴﺮﺓ‬‫ﻛﻤﺎ‬،‫ﻧﻌﻠﻢ‬‫ﻫﺬﺍ‬‫ﺍﻷﻣﺮ‬‫ﺃﺩﻯ‬‫ﺍﻟﻰ‬‫ﺃﻥ‬‫ﻳﺠﻌﻞ‬
‫ﻣﻨﻈﻤﺔ‬‫ﺍﻝ‬w3c‫ﻣﻦ‬‫ﺍﻟﺘﻮﺟﻪ‬‫ﺍﻟﻰ‬‫ﺗﻄﻮﻳﺮ‬‫ﺍﻝ‬module‫ﺍﻟﺨﺎﺹ‬‫ﺏ‬media query
..‫ﻟﻴﺼﺒﺢ‬‫ﺩﺍﻋﻤﺎ‬‫ﻭﻣﺘﻮﺍﻓﻘﺎ‬‫ﻟﻸﺟﻬﺰﺓ‬،‫ﺍﻟﻤﺨﺘﻠﻔﺔ‬‫ﻭﻫﺬﻩ‬‫ﺍﻟﺤﺮﻛﺔ‬‫ﺍﻟﺮﺍﺋﻌﺔ‬‫ﻭﺍﻟﻤﺨﻴﻔﺔ‬‫ﻓﻲ‬
‫ﻋﺎﻟﻢ‬،‫ﺍﻟﻮﻳﺐ‬‫ﺃﻋﻄﺘﻨﺎ‬‫ﻗﺪﺭﺓ‬‫ﻭﺇﻣﻜﺎﻧﻴﺔ‬‫ﻋﻠﻰ‬‫ﺍﻟﺘﺤﻜﻢ‬‫ﺑﺎﻟﺘﺼﻤﻴﻢ‬‫ﻭﺍﻟﺘﻨﺴﻴﻖ‬‫ﻭﻁﺮﻳﻘﺔ‬
‫ﺍﻟﻌﺮﺽ‬‫ﺍﻟﺨﺎﺻﺔ‬‫ﺑﺄﻱ‬‫ﺻﻔﺤﺔ‬‫ﻋﻠﻰ‬‫ﻣﻮﻗﻊ‬‫ﺍﻻﻧﺘﺮﻧﺖ‬‫ﺳﺘﻌﺮﺽ‬‫ﻋﻠﻰ‬‫ﺃﻱ‬،‫ﺟﻬﺎﺯ‬
‫ﻭﻅﻬﺮﺕ‬‫ﻫﻨﺎ‬‫ﺇﺣﺪﻯ‬‫ﺃﻫﻢ‬‫ﺍﻷﻓﻜﺎﺭ‬‫ﻭﻫﻲ‬‫ﺍﻝ‬Responsive Design^_^
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

16. Media Query
‫ﻭﺍﻵﻥ‬..‫ﺳﻨﺘﻄﺮﻕ‬‫ﺍﻟﻰ‬Syntax‫ﺍﻟﺨﺎﺹ‬‫ﺑﻬﺬﻩ‬‫ﺍﻝ‬media query‫ﻭﻫﻮ‬‫ﻋﻠﻰ‬‫ﺍﻟﺸﻜﻞ‬
‫ﺍﻟﺘﺎﻟﻲ‬:
‫ﻓﻜﻤﺎ‬‫ﺗﻼﺣﻆ‬..‫ﻣﻦ‬‫ﺍﻟﺼﻴﻐﺔ‬‫ﺍﻷﻭﻟﻰ‬..‫ﻓﻬﻲ‬‫ﺗﺸﺒﻪ‬‫ﻁﺮﻳﻘﺔ‬‫ﺗﻀﻤﻴﻦ‬‫ﻣﻠﻒ‬css،‫ﻟﻜﻦ‬
‫ﺍﻟﺠﺪﻳﺪ‬‫ﻫﻮ‬‫ﺍﻝ‬media..
‫ﺃﻣﺎ‬‫ﺍﻟﺼﻴﻐﺔ‬‫ﺍﻟﺜﺎﻧﻴﺔ‬‫ﻓﻬﻲ‬‫ﻁﺮﻳﻘﺔ‬‫ﻛﺘﺎﺑﺔ‬‫ﺍﻟﺘﻨﺴﻴﻖ‬‫ﺍﻟﺨﺎﺹ‬‫ﺏ‬css‫ﺩﺍﺧﻞ‬‫ﺍﻟﺼﻔﺤﺔ‬
..)‫ﻭﻛﺄﻧﻲ‬‫ﻗﻤﺖ‬‫ﺑﻌﻤﻞ‬‫ﺷﺮﻁ‬‫ﻟﺘﻨﻔﻴﺬ‬‫ﺍﻟﺘﻨﺴﻴﻖ‬‫ﺿﻤﻦ‬‫ﺍﻟﻤﻠﻒ‬‫ﻧﻔﺴﻪ‬(..
‫ﻭﺍﻵﻥ‬‫ﺍﻟﺴﺆﺍﻝ‬‫ﺍﻷﻗﻮﻯ‬..‫ﺃﻧﺎ‬*_*‫ﻣﺶ‬‫ﻓﺎﻫﻢ‬‫ﺍﺷﻲ‬‫ﻣﻦ‬‫ﺍﻟﻤﻜﺘﻮﺏ‬:P..‫ﺍﺫﻥ‬‫ﻟﻨﻨﺘﻘﻞ‬
‫ﺍﻟﻰ‬‫ﺍﻟﺸﺮﻳﺤﺔ‬‫ﺍﻟﺘﺎﻟﻴﺔ‬..‫ﻟﻨﺸﺮﺡ‬‫ﻣﻜﻮﻧﺎﺕ‬‫ﻫﺬﻩ‬‫ﺍﻟﺼﻴﻐﺔ‬..
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

17. Media Query
‫ﺷﺮﺡ‬‫ﻣﻜﻮﻧﺎﺕ‬‫ﺍﻟﺼﻴﻐﺔ‬‫ﺍﻟﺴﺎﺑﻘﺔ‬:
(1Logic:‫ﻭﻫﻲ‬‫ﺇﻣﺎ‬only‫ﻭﺇﻣﺎ‬not‫ﻟﻠﺼﻴﻐﺔ‬‫ﺍﻟﺜﺎﻧﻴﺔ‬‫ﺃﻣﺎ‬‫ﺍﻟﺼﻴﻐﺔ‬‫ﺍﻷﻭﻟﻰ‬‫ﻓﻬﻲ‬‫ﻣﺎ‬‫ﺗﻢ‬
‫ﺫﻛﺮﻩ‬‫ﺑﺎﻹﺿﺎﻓﺔ‬‫ﺍﻟﻰ‬and
not:‫ﻭﺗﺴﺘﺨﺪﻡ‬‫ﻓﻲ‬‫ﺣﺎﻝ‬‫ﺃﺭﺩﻧﺎ‬‫ﺗﻨﻔﻴﺬ‬rules‫ﻣﻌﻴﻨﺔ‬‫ﻋﻨﺪﻣﺎ‬‫ﻻ‬‫ﻳﻨﻄﺒﻖ‬exp)‫ﻋﻜﺲ‬(
only:‫ﺗﺴﺘﺨﺪﻡ‬‫ﻫﺬﻩ‬‫ﺍﻟﻘﻴﻤﺔ‬‫ﻋﻨﺪﻣﺎ‬‫ﻧﺮﻳﺪ‬‫ﺍﺧﻔﺎء‬‫ﺃﻭ‬‫ﻋﺪﻡ‬‫ﺗﻨﻔﻴﺬ‬‫ﺍﻝ‬rules‫ﻋﻠﻰ‬‫ﺑﻨﺎﺋﺎ‬
‫ﻋﻠﻰ‬media‫ﻣﻌﻴﻨﺔ‬.
(1‫ﺃﻣﺎ‬‫ﺍﻝ‬Expressions‫ﻓﻬﻲ‬‫ﺍﻟﺘﻌﺒﻴﺮ‬‫ﺍﻟﺬﻱ‬‫ﺳﻨﻘﻮﻡ‬‫ﺑﻜﺘﺎﺑﺘﻪ‬‫ﻟﻴﺘﻢ‬‫ﺗﻨﻔﻴﺬ‬‫ﺍﻟﺘﻨﺴﻴﻖ‬‫ﺍﺫﺍ‬
‫ﺣﺪﺙ‬..‫ﻣﺜﻞ‬‫ﺗﺤﺪﻳﺪ‬‫ﺃﻗﻞ‬‫ﻋﺮﺽ‬480‫ﺑﻜﺴﻞ‬...‫ﻭﻫﻜﺬﺍ‬
(2‫ﺃﻣﺎ‬‫ﺍﻝ‬Rules‫ﺍﻟﻤﻮﺟﻮﺩﺓ‬‫ﻓﻲ‬‫ﺍﻟﺼﻴﻐﺔ‬‫ﺍﻟﺜﺎﻧﻴﺔ‬‫ﻓﻴﻘﺼﺪ‬‫ﺑﻬﺎ‬‫ﺍﻟﺸﻴﻔﺮﺓ‬‫ﺍﻟﺒﺮﻣﺠﻴﺔ‬‫ﺍﻟﻤﺮﺍﺩ‬
‫ﺗﻨﻔﻴﺬﻫﺎ‬‫ﻋﻨﺪ‬‫ﺗﺤﻘﻖ‬‫ﺍﻟﻨﻘﻄﺔ‬2)Expressions(.
(3Media:‫ﻫﻮ‬‫ﺍﻟﺠﻬﺎﺯ‬‫ﺍﻟﻤﺴﺘﻬﺪﻑ‬‫ﻭﻟﻪ‬‫ﺧﻴﺎﺭﺍﺕ‬‫ﻛﺜﻴﺮﺓ‬‫ﺳﻨﺘﻄﺮﻕ‬‫ﻟﺒﻌﻀﻬﺎ‬‫ﺑﺈﺫﻥ‬‫ﷲ‬
‫ﺗﻌﺎﻟﻰ‬‫ﺑﺎﻟﺸﺮﺍﺋﺢ‬‫ﺍﻟﺘﺎﻟﻴﺔ‬..
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

18. Media Query
‫ﻣﻼﺣﻈﺔ‬:‫ﺍﻝ‬media query‫ﻻ‬‫ﺗﺪﻋﻢ‬‫ﺍﻝ‬IE8،‫ﻟﺬﻟﻚ‬‫ﻧﺴﺨﺪﻡ‬hack‫ﻟﻤﺘﺼﻔﺢ‬‫ﺍﻝ‬IE8
‫ﻳﻘﻮﻡ‬‫ﻋﻠﻰ‬‫ﺗﻨﻔﻴﺬ‬‫ﺍﻟﺘﻨﺴﻴﻖ‬‫ﺍﻟﺨﺎﺹ‬‫ﺑﺼﻔﺤﺔ‬‫ﺍﻝ‬Desktop‫ﻣﺜﻞ‬
‫ﺍﻵﻥ‬‫ﻛﻴﻒ‬‫ﻳﻤﻜﻨﻨﻲ‬‫ﻛﺘﺎﺑﺔ‬‫ﺍﻝ‬Expressions‫؟‬
‫ﺍﻟﺠﻮﺍﺏ‬‫ﺑﻜﻞ‬‫ﺑﺴﺎﻁﺔ‬‫ﻋﻦ‬‫ﻁﺮﻳﻖ‬‫ﺍﺳﺘﺨﺪﺍﻡ‬‫ﺧﺼﺎﺋﺺ‬‫ﺍﻝ‬css‫ﺍﻟﺘﻲ‬‫ﻧﻌﺮﻓﻬﺎ‬‫ﻣﺜﻞ‬
width‫ﻭﺍﻝ‬min-width‫ﻭﺍﻝ‬max-width‫ﻭﺍﻝ‬height‫ﻭﺍﻝ‬min-height‫ﻭﺍﻝ‬max-
height...
‫ﻭﺑﺎﻟﺤﻘﻴﻘﺔ‬‫ﺃﻛﺜﺮ‬‫ﻣﺎ‬‫ﻧﺴﺘﺨﺪﻣﻪ‬‫ﻫﻮ‬‫ﺍﻝ‬min-max‫ﻟﻞ‬width..‫ﻟﺒﻨﺎء‬‫ﺗﺼﻤﻴﻢ‬‫ﺍﻝ‬
responsive..
‫ﻣﺜﺎﻝ‬:
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(
Rules Exp
media

19. Media Query
‫ﺃﻣﺎ‬‫ﺍﻝ‬media‫ﻓﻬﻲ‬
screen, print, handheld, aural/speech, embossed, braille,
projection, tv, tty, all
‫ﻭﺃﻫﻢ‬‫ﺍﻟﺨﺼﺎﺋﺺ‬‫ﺍﻟﺘﻲ‬‫ﻧﻌﻤﻞ‬‫ﻋﻠﻴﻬﺎ‬‫ﺑﺎﻟﺘﺤﺪﻳﺪ‬‫ﻫﻲ‬‫ﺍﻝ‬screen, all‫ﺃﻳﻀﺎ‬‫ﺍﻟﻘﻴﻢ‬
‫ﺍﻷﺧﺮﻯ‬..‫ﻟﻜﻦ‬‫ﻫﺬﺍ‬‫ﺑﺎﻟﻐﺎﻟﺐ‬...‫ﻁﺒﻌﺎ‬.
‫ﺍﻝ‬screen:‫ﺍﻋﻤﻞ‬‫ﻋﻠﻰ‬‫ﺷﺎﺷﺎﺕ‬‫ﺍﻟﻜﻮﻣﺒﻴﻮﺗﺮ‬‫ﻭﺍﻻﺏ‬‫ﺗﻮﺏ‬‫ﻭﺍﻟﺘﺎﺑﻠﺖ‬‫ﻭﺍﻷﺟﻬﺰﺓ‬
‫ﺍﻟﺬﻛﻴﺔ‬...
All:‫ﺟﻤﻴﻊ‬‫ﺍﻷﺟﻬﺰﺓ‬.
Print:‫ﻋﻨﺪ‬‫ﺍﻟﻄﺒﺎﻋﺔ‬..
Projection:‫ﻭﺳﺎﺋﻞ‬‫ﺍﻟﻌﺮﺽ‬‫ﻣﺜﻞ‬‫ﺍﻝ‬‫ﻋﺮﺽ‬slides...
Tv:‫ﺷﺎﺷﺎﺕ‬‫ﺍﻟﺘﻠﻔﺰﻳﻮﻥ‬..
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

20. Media Query
‫ﻭﺍﻵﻥ‬..‫ﻟﻨﺸﺎﻫﺪ‬‫ﻛﻴﻒ‬‫ﻳﻤﻜﻨﻨﺎ‬‫ﺗﻀﻤﻴﻦ‬‫ﻣﻠﻒ‬css‫ﺧﺎﺹ‬‫ﻷﺣﺠﺎﻡ‬‫ﺍﻟﻬﻮﺍﺗﻒ‬
‫ﺍﻟﺼﻐﻴﺮﺓ‬..‫ﺷﺎﻫﺪ‬‫ﺍﻟﻤﺜﺎﻝ‬:
‫ﻭﻫﺬﻩ‬‫ﺗﻌﻨﻲ‬‫ﺇﻋﻤﻞ‬‫ﻋﻠﻰ‬‫ﺍﻟﻨﺎﻓﺬﺓ‬‫ﺍﻟﺼﻐﻴﺮﺓ‬‫ﻭﺍﻟﺘﻲ‬‫ﻳﻘﻞ‬‫ﻋﺮﺿﻬﺎ‬‫ﺃﻭ‬‫ﻳﺴﺎﻭﻱ‬480
‫ﺑﻜﺴﻞ‬_^*
‫ﺃﻳﻀﺎ‬‫ﻳﻤﻜﻨﻨﺎ‬‫ﻭﺿﻊ‬Range‫ﺃﻭ‬‫ﺷﺮﻁ‬..‫ﻓﻤﺜﻼ‬‫ﺃﻛﺒﺮ‬‫ﻣﻦ‬‫ﻭﺃﻗﻞ‬‫ﻣﻦ‬..‫ﺷﺎﻫﺪ‬‫ﺍﻟﻤﺜﺎﻝ‬:
‫ﻓﻲ‬‫ﻫﺬﺍ‬‫ﺍﻟﻤﺜﺎﻝ‬..‫ﺳﻴﺘﻢ‬‫ﺗﻨﻔﻴﺬ‬‫ﺍﻟﺸﻴﻔﺮﺓ‬‫ﺍﻟﺒﺮﻣﺠﻴﺔ‬‫ﺍﺫﺍ‬‫ﻛﺎﻧﺖ‬‫ﺃﻛﺒﺮ‬‫ﺃﻭ‬‫ﻳﺴﺎﻭﻱ‬480
‫ﺑﻜﺴﻞ‬‫ﻭ‬‫ﺃﻗﻞ‬‫ﺃﻭ‬‫ﻳﺴﺎﻭﻱ‬800‫ﺑﻜﺴﻞ‬
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

21. Media Query
‫ﺍﻵﻥ‬..‫ﺳﺄﺗﻄﺮﻕ‬‫ﺍﻟﻰ‬‫ﺫﻛﺮ‬‫ﻧﻘﺎﻁ‬‫ﻣﻬﻤﺔ‬‫ﺟﺪﺍ‬,‫ﻭﻻ‬‫ﺗﻘﻠﻖ‬‫ﺑﺨﺼﻮﺹ‬‫ﺍﻷﻣﺜﻠﺔ‬,‫ﺳﻴﺘﻢ‬‫ﻭﺿﻊ‬
‫ﺍﻟﻌﺪﻳﺪ‬‫ﻣﻦ‬‫ﺍﻷﻣﺜﻠﺔ‬‫ﺑﺈﺫﻥ‬‫ﷲ‬‫ﺗﻌﺎﻟﻰ‬,‫ﻓﻲ‬‫ﻧﻬﺎﻳﺔ‬‫ﻫﺬﺍ‬‫ﺍﻟﺸﺮﺡ‬..
‫ﻣﻦ‬‫ﺍﻟﺨﺼﺎﺋﺺ‬‫ﺃﻭ‬‫ﺍﻟﻘﻮﺍﻋﺪ‬‫ﺍﻟﺘﻲ‬‫ﻳﻤﻜﻦ‬‫ﺍﺳﺘﺨﺪﺍﻣﻬﺎ‬‫ﻭﻛﻤﺎ‬‫ﺫﻛﺮﻧﻬﺎ‬‫ﺍﻝ‬height‫ﻭﺍﻝ‬width
‫ﺩﺍﺧﻞ‬‫ﺍﻝ‬media query..‫ﻟﻜﻦ‬‫ﻫﻨﺎﻙ‬‫ﺧﺼﺎﺋﺺ‬‫ﺃﺧﺮﻯ‬‫ﻣﺜﻞ‬
device-width‫ﻭ‬device-height..‫ﻭﺑﺎﻟﺘﺄﻛﻴﺪ‬‫ﻳﻤﻜﻦ‬‫ﺍﺳﺘﺨﺪﺍﻡ‬‫ﺍﻝ‬min/max-device-w/h
‫ﺑﺎﻹﺿﺎﻓﺔ‬‫ﺍﻟﻰ‬‫ﻭﺟﻮﺩ‬‫ﺧﺎﺻﻴﺔ‬‫ﺍﻝ‬orientation..‫ﻓﻤﺎ‬‫ﻫﻲ‬‫ﻭﻅﻴﻔﺔ‬‫ﻫﺬﻩ‬‫ﺍﻟﺨﺼﺎﺋﺺ؟‬
device-width:‫ﻫﺬﻩ‬‫ﺗﻌﻄﻴﻨﺎ‬‫ﻋﺮﺽ‬‫ﺷﺎﺷﺔ‬‫ﺍﻟﺠﻬﺎﺯ‬.‫ﻭﺍﻵﻥ‬‫ﺳﺘﻘﻮﻝ‬‫ﺑﻜﻞ‬‫ﺗﺄﻛﻴﺪ‬..‫ﻣﺎ‬‫ﺍﻟﻔﺮﻕ‬
‫ﺑﻴﻨﻬﺎ‬‫ﻭﺑﻴﻦ‬‫ﺍﻝ‬width‫؟‬..‫ﻭﻫﺬﺍ‬‫ﺳﺆﺍﻝ‬‫ﻣﻬﻢ‬^_^
‫ﺟﻮﺍﺏ‬‫ﻫﺬﺍ‬‫ﺍﻟﺴﺆﺍﻝ‬‫ﻫﻮ‬.‫ﺃﻥ‬‫ﺍﻝ‬width‫ﺗﺴﺘﺨﺪﻡ‬‫ﻟﻤﻌﺮﻓﺔ‬‫ﻋﺮﺽ‬‫ﻧﺎﻓﺬﺓ‬‫ﺍﻟﻌﺮﺽ‬
)‫ﺍﻟﻤﺘﺼﻔﺢ‬‫ﺍﻟﺬﻱ‬‫ﻳﻌﺮﺽ‬‫ﺍﻟﺼﻔﺤﺔ‬(..‫ﻧﻌﻢ‬,‫ﻣﺎ‬‫ﺗﻔﻜﺮ‬‫ﺑﻪ‬‫ﺻﺤﻴﺢ‬..‫ﺍﺫﺍ‬‫ﺍﺳﺘﺨﺪﻣﺖ‬‫ﺍﻝ‬
device-width‫ﻓﺈﻥ‬‫ﺍﻟﺘﻨﺴﻴﻖ‬‫ﺳﻴﺘﻢ‬‫ﺗﻨﻔﻴﺬﻩ‬‫ﻋﻠﻰ‬‫ﺟﻬﺎﺯ‬‫ﺷﺎﺷﺔ‬‫ﺍﻟﻌﺮﺽ‬‫ﺣﺠﻤﻬﺎ‬‫ﻳﻨﻄﺒﻖ‬‫ﻋﻠﻴﻪ‬
‫ﺍﻟﺸﺮﻁ‬..‫ﻭﺑﻬﺬﺍ‬‫ﻣﻦ‬‫ﺟﻬﺎﺯ‬‫ﺳﻄﺢ‬‫ﺍﻟﻤﻜﺘﺐ‬‫ﻟﻦ‬‫ﻳﻌﻤﻞ‬‫ﻋﻠﻴﻪ‬‫ﻫﺬﺍ‬‫ﺍﻟﺘﻨﺴﻴﻖ‬‫ﺣﺘﻰ‬‫ﻭﻟﻮ‬‫ﻗﻤﺖ‬
‫ﺑﺘﺼﻐﻴﺮ‬‫ﺍﻟﻤﺘﺼﻔﺢ‬..‫ﺃﻣﺎ‬‫ﺑﺎﻝ‬width..‫ﻓﺴﻴﻌﻤﻞ‬‫ﺍﻟﺘﻨﺴﻴﻖ‬‫ﻋﻠﻰ‬‫ﺍﻱ‬‫ﺷﺎﺷﺔ‬‫ﺑﻤﺠﺮﺩ‬‫ﺃﻥ‬
‫ﺣﺠﻢ‬‫ﺍﻟﻤﺘﺼﻔﺢ‬‫ﻭﺻﻞ‬‫ﻟﻠﺸﺮﻁ‬...
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

22. Media Query
‫ﻭﺍﻵﻥ‬‫ﻟﻨﺮﻯ‬‫ﻣﺜﺎﻻ‬‫ﻋﻠﻰ‬‫ﻫﺬﻩ‬‫ﺍﻟﻨﻘﻄﺔ‬:
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

23. Media Query
‫ﺃﻣﺎ‬‫ﺑﺨﺼﻮﺹ‬‫ﻭﻅﻴﻔﺔ‬‫ﺍﻝ‬orientation‫ﻓﻬﻲ‬‫ﺧﺎﺻﻴﺔ‬‫ﻳﻤﻜﻨﻚ‬‫ﺍﺳﺘﺨﺪﺍﻣﻬﺎ‬‫ﻟﺘﺤﺪﻳﺪ‬‫ﺇﺫﺍ‬
‫ﻣﺎ‬‫ﻛﺎﻥ‬‫ﺍﻟﺠﻬﺎﺯ‬‫ﻓﻲ‬‫ﻭﺿﻊ‬‫ﺍﻝ‬Landscape‫ﺃﻭ‬portrait..
‫ﻭﺍﻵﻥ‬‫ﺷﺎﻫﺪ‬‫ﻫﺬﺍ‬‫ﺍﻟﻤﺜﺎﻝ‬:
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

24. Media Query
‫ﻣﻼﺣﻈﺔ‬:‫ﺍﺫﺍ‬‫ﺃﺭﺩﺕ‬‫ﺗﺠﺮﺑﺔ‬‫ﺍﻟﺸﺮﻁ‬‫ﺍﻟﻤﺜﺎﻝ‬‫ﺍﻟﺴﺎﺑﻖ‬..‫ﻓﺴﻴﻨﻔﺬ‬‫ﺍﻟﺸﺮﻁ‬..‫ﺍﺫﺍ‬‫ﻛﺎﻥ‬‫ﺣﺠﻢ‬
‫ﺍﻟﻤﺘﺼﻔﺢ‬‫ﺃﻗﻞ‬‫ﺃﻭ‬‫ﻳﺴﺎﻭﻱ‬1500..‫ﻭﻛﺎﻥ‬‫ﻧﺴﺒﺔ‬‫ﻋﺮﺽ‬‫ﺍﻟﻤﺘﺼﻔﺢ‬‫ﺃﻛﺒﺮ‬‫ﻣﻦ‬
‫ﺍﻟﻄﻮﻝ‬‫ﺍﻟﺨﺎﺹ‬‫ﺑﻪ‬..‫ﺳﻴﻌﻤﻞ‬‫ﺷﺮﻁ‬‫ﺍﻝ‬orientation‫ﻋﻠﻰ‬‫ﺃﻥ‬‫ﺍﻟﻌﺮﺽ‬‫ﺍﻵﻥ‬
landscape..‫ﺷﺎﻫﺪ‬‫ﻧﺘﻴﺠﺔ‬‫ﺍﻟﻤﺜﺎﻝ‬:
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

25. Media Query
‫ﻭﺍﻵﻥ‬..‫ﻧﺄﺗﻲ‬‫ﺍﻟﻰ‬‫ﻣﻮﺿﻮﻉ‬‫ﻣﻬﻢ‬‫ﺟﺪﺍ‬‫ﺟﺪﺍ‬..‫ﻭﻫﻮ‬‫ﺍﻝ‬viewport,‫ﻭﻳﺠﺐ‬‫ﺍﻟﺘﺮﻛﻴﺰ‬‫ﻓﻲ‬‫ﻫﺬﺍ‬
‫ﺍﻟﻤﻮﺿﻮﻉ‬‫ﺇﻥ‬‫ﺃﺭﺩﺕ‬‫ﺃﻥ‬‫ﻳﻜﻮﻥ‬‫ﻋﻤﻠﻚ‬‫ﺻﺤﻴﺤﺎ‬..
‫ﻟﻘﺪ‬‫ﺗﻜﻠﻤﻨﺎ‬‫ﻓﻲ‬‫ﺍﻟﺼﻔﺤﺎﺕ‬‫ﺍﻟﻤﺎﺿﻴﺔ‬‫ﻋﻦ‬‫ﻭﺟﻮﺩ‬‫ﺧﺎﺻﻴﺘﻴﻦ‬‫ﻭﻫﻤﺎ‬‫ﺍﻝ‬width‫ﻭﺍﻝ‬device-width
...‫ﻭﻗﻠﻨﺎ‬‫ﺃﻥ‬‫ﺍﻝ‬width‫ﺑﻨﺎﺋﺎ‬‫ﻋﻠﻰ‬‫ﺣﺠﻢ‬‫ﺍﻟﻨﺎﻓﺬﺓ‬)‫ﺍﻟﻤﺘﺼﻔﺢ‬(‫ﻭﺍﻝ‬device-width‫ﺑﻨﺎﺋﺎ‬‫ﻋﻠﻰ‬
‫ﺍﻟﺤﺠﻢ‬‫ﺍﻟﻔﻌﻠﻲ‬‫ﻟﻠﺠﻬﺎﺯ‬..
‫ﻟﺬﻟﻚ‬‫ﻓﺈﻥ‬‫ﺍﻟﻤﺴﺘﺨﺪﻡ‬‫ﻫﻮ‬device-width‫ﻹﻋﻄﺎء‬‫ﺍﻟﺘﻨﺴﻴﻖ‬‫ﻟﻸﺟﻬﺰﺓ‬‫ﺍﻟﺼﻐﻴﺮﺓ‬‫ﻣﺜﻞ‬‫ﺍﻟﺨﻠﻮﻳﺎﺕ‬
‫ﻭﻏﻴﺮﻫﺎ‬..
‫ﻟﻜﻦ‬‫ﻫﻨﺎﻙ‬‫ﻣﺸﻜﻠﺔ‬‫ﻧﺤﻦ‬‫ﻧﺤﺘﺎﺝ‬‫ﺃﻥ‬‫ﻧﺴﺘﺨﺪﻡ‬‫ﺍﻝ‬width‫ﺣﺘﻰ‬‫ﻳﻌﻤﻞ‬‫ﺍﻟﺘﻨﺴﻴﻖ‬‫ﺍﻟﺨﺎﺹ‬‫ﺑﺄﻱ‬
‫ﺟﺰﺋﻴﺔ‬‫ﺑﻨﺎﺋﺎ‬‫ﻋﻠﻰ‬‫ﺣﺠﻢ‬‫ﺍﻟﻤﺘﺼﻔﺢ‬..‫ﻟﻜﻦ‬‫ﺍﻟﻤﺸﻜﻠﺔ‬‫ﺗﻜﻤﻦ‬‫ﻫﻨﺎ‬‫ﺑﺄﻥ‬‫ﻫﻨﺎﻙ‬‫ﻁﺮﻳﻘﺔ‬‫ﺃﻭ‬‫ﺁﻟﻴﺔ‬
‫ﻟﻜﻞ‬‫ﻣﺘﺼﻔﺢ‬‫ﻟﺤﺴﺎﺏ‬‫ﻣﻘﺪﺍﺭ‬‫ﺍﻟﺘﺼﻐﻴﺮ‬‫ﺃﻭ‬‫ﺍﻟﺘﻜﺒﻴﺮ‬‫ﺍﻟﺬﻱ‬‫ﻳﺤﺘﺎﺟﻪ‬‫ﺣﺘﻰ‬‫ﻳﺘﻼﺋﻢ‬‫ﻣﻊ‬
‫ﺍﻟﻌﺮﺽ‬..‫ﻭﻫﺬﺍ‬‫ﻳﻌﻨﻲ‬‫ﺃﻥ‬‫ﻣﺘﺼﻔﺢ‬‫ﺍﻝ‬ie‫ﻳﺨﺘﻠﻒ‬‫ﻋﻦ‬‫ﻣﺘﺼﻔﺢ‬‫ﺍﻵﻧﺪﺭﻭﻳﺪ‬‫ﻭﻳﺨﺘﻠﻒ‬‫ﻋﻦ‬
‫ﺍﻝ‬opera..‫ﺍﻟﺦ‬
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

26. Media Query
‫ﺍﻵﻥ‬..‫ﻣﻨﻄﻘﺔ‬‫ﺍﻟﻌﺮﺽ‬‫ﺍﻟﺨﺎﺻﺔ‬‫ﺑﺎﻟﻤﺘﺼﻔﺢ‬‫ﻫﻲ‬‫ﺍﻟﺘﻲ‬‫ﺗﺴﻤﺎ‬‫ﺏ‬viewport,‫ﻭﻫﻲ‬
‫ﺍﻟﺘﻲ‬‫ﻳﺘﻢ‬‫ﻣﺤﺎﻛﺎﺗﻬﺎ‬‫ﻭﻫﻲ‬‫ﺍﻟﺘﻲ‬‫ﺗﺨﺘﻠﻒ‬‫ﻣﻦ‬‫ﺟﻬﺎﺯ‬‫ﺍﻟﻰ‬‫ﺁﺧﺮ‬,‫ﻭﻣﻦ‬‫ﻣﺘﺼﻔﺢ‬‫ﻵﺧﺮ‬
..‫ﺍﺫﻥ‬‫ﺃﻳﻦ‬‫ﺍﻟﻤﺸﻜﻠﺔ‬‫ﺍﻟﻰ‬‫ﺍﻵﻥ؟‬
‫ﺍﻟﻤﺸﻜﻠﺔ‬‫ﻓﻲ‬‫ﺃﻧﻪ‬‫ﺍﺫﺍ‬‫ﺍﺳﺘﺨﺪﻣﺖ‬‫ﺍﻝ‬max-width:480px‫ﻋﻠﻰ‬‫ﺳﺒﻴﻞ‬‫ﺍﻟﻤﺜﺎﻝ‬‫ﻓﺈﻧﻪ‬‫ﺳﻴﺘﻢ‬
‫ﺍﻟﻤﻘﺎﺭﻧﺔ‬‫ﻣﻊ‬‫ﺣﺠﻢ‬‫ﺍﻝ‬viewport‫ﻭﻟﻴﺲ‬‫ﻣﻊ‬‫ﺣﺠﻢ‬‫ﺍﻟﺠﻬﺎﺯ‬..‫ﻭﻟﻮ‬‫ﺍﻓﺘﺮﺿﻨﺎ‬‫ﺃﻥ‬
‫ﺍﻟﺠﻬﺎﺯ‬‫ﻳﺴﺘﺨﺪﻡ‬‫ﻣﺘﺼﻔﺢ‬‫ﺍﻵﻧﺪﺭﻭﻳﺪ‬1‫ﻓﺈﻥ‬‫ﻗﻴﻤﺔ‬‫ﺍﻝ‬viewport‫ﺳﺘﻜﻮﻥ‬‫ﻫﻲ‬800px
0_0..‫ﺍﺫﺍ‬‫ﻣﺎ‬‫ﺍﻟﺤﻞ‬..*_*
‫ﺍﻟﺤﻞ‬‫ﺑﻜﻞ‬‫ﺑﺴﺎﻁﺔ‬‫ﻭﺟﻤﺎﻝ‬..‫ﻫﻮ‬‫ﺍﺳﺘﺨﺪﺍﻡ‬‫ﻫﺬﻩ‬‫ﺍﻝ‬meta tag:
‫ﻫﺬﻩ‬‫ﺍﻝ‬metatag..‫ﺩﺍﺋﻤﺎ‬‫ﺍﺳﺘﺨﺪﻣﻬﺎ‬‫ﻭﺿﻌﻬﺎ‬‫ﻓﻲ‬‫ﺍﻝ‬head..‫ﻭﻫﻨﺎ‬‫ﺃﺟﺒﺮﺕ‬‫ﺍﻟﻤﺘﺼﻔﺢ‬
‫ﺃﻳﺎ‬‫ﻛﺎﻥ‬‫ﻧﻮﻋﻪ‬‫ﻋﻠﻰ‬‫ﺃﻥ‬‫ﻳﺠﻌﻞ‬‫ﺍﻝ‬width‫ﻳﺴﺎﻭﻱ‬‫ﻋﺮﺽ‬‫ﺍﻟﺠﻬﺎﺯ‬..‫ﻭﺃﻥ‬‫ﻗﻴﻤﺔ‬‫ﺍﻝ‬
zoom‫ﻫﻲ‬1‫ﺃﻱ‬‫ﺍﻟﺤﺎﻟﺔ‬‫ﺍﻹﻓﺘﺮﺍﺿﻴﺔ‬‫ﻟﺤﺠﻢ‬‫ﺍﻟﺸﺎﺷﺔ‬..)‫ﺃﻱ‬‫ﻻ‬‫ﻳﻮﺟﺪ‬‫ﺃﻱ‬zoom(
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

27. Media Query
‫ﻣﻼﺣﻈﺔ‬1:‫ﻭﻫﻲ‬‫ﻻ‬‫ﺗﺴﺘﺨﺪﻡ‬‫ﻫﺬﺍ‬‫ﺍﻝ‬tag‫ﺍﻻ‬‫ﺍﺫﺍ‬‫ﻛﺎﻥ‬‫ﻣﻮﻗﻌﻚ‬responsive^_^
‫ﻣﻼﺣﻈﺔ‬2:‫ﻫﻨﺎﻙ‬‫ﺧﺼﺎﺋﺺ‬‫ﺃﺧﺮﻯ‬‫ﻳﻤﻜﻨﻚ‬‫ﺍﺳﺘﺨﺪﺍﻣﻬﺎ‬‫ﻣﻊ‬‫ﻫﺬﺍ‬‫ﺍﻝ‬tag‫ﻣﺜﻞ‬‫ﺍﻝ‬user-
scalable‫ﻭﻫﻲ‬‫ﻟﻤﻨﻊ‬‫ﻋﻤﻠﻴﺔ‬‫ﺍﻝ‬zooming‫ﻣﺜﻼ‬..‫ﻭﻟﻬﺎ‬‫ﻗﻴﻤﺘﺎﻥ‬yes, no..‫ﻭﻏﺮﻳﻬﺎ‬
..‫ﻣﺜﻞ‬‫ﺗﺤﺪﻳﺪ‬‫ﺍﻟﺤﺪ‬‫ﺍﻷﻋﻠﻰ‬‫ﻟﻞ‬zoom‫ﻭﺍﻟﺤﺪ‬‫ﺍﻷﺩﻧﻰ‬..‫ﺍﻟﺦ‬
‫ﻣﻼﺣﻈﺔ‬3:‫ﺇﻥ‬‫ﺍﻝ‬media query‫ﺑﺎﻹﺻﻞ‬‫ﻫﻲ‬‫ﺧﺼﺎﺋﺺ‬css2,‫ﻟﻜﻦ‬‫ﻣﺎ‬‫ﺗﻢ‬‫ﺍﺿﺎﻓﺘﻪ‬
‫ﺍﻟﻴﻬﺎ‬‫ﻣﻦ‬‫ﺧﺼﺎﺋﺺ‬‫ﺟﺪﻳﺪﺓ‬‫ﻭﺍﻟﺘﻲ‬‫ﺫﻛﺮﻧﻬﺎ‬..‫ﻓﻬﻲ‬‫ﻣﻦ‬‫ﺳﻤﺎﺕ‬‫ﺍﻝ‬css3‫ﻟﺬﻟﻚ‬‫ﺳﺘﺠﺪ‬‫ﺃﻧﻪ‬
‫ﻓﻲ‬‫ﺍﻝ‬css2‫ﻛﻨﺎ‬‫ﻧﺴﺘﺨﺪﻡ‬‫ﺍﻝ‬media query‫ﻟﻞ‬print‫ﻛﻤﺜﺎﻝ‬_^*
‫ﻣﻼﺣﻈﺔ‬4:‫ﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬‫ﺍﻟﺘﻲ‬‫ﺗﺪﻋﻢ‬‫ﻫﺬﻩ‬‫ﺍﻟﺨﺼﺎﺋﺺ‬‫ﺟﻤﻴﻊ‬‫ﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬‫ﺍﻟﺮﺋﻴﺴﻴﺔ‬‫ﻭﺍﻝ‬
ie‫ﻣﻦ‬‫ﺍﻹﺻﺪﺍﺭ‬‫ﺍﻟﺘﺎﺳﻊ‬)‫ﻟﺬﻟﻚ‬‫ﻋﻠﻴﻚ‬‫ﺍﺳﺘﺨﺪﺍﻡ‬‫ﺍﻝ‬hack‫ﺍﻟﺬﻱ‬‫ﺫﻛﺮﻧﺎﻩ‬‫ﺳﺎﺑﻘﺎ‬(.
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

28. Media Query
‫ﻭﺍﻵﻥ‬‫ﻟﻨﺸﺎﻫﺪ‬‫ﺃﻣﺜﻠﺔ‬‫ﻣﺘﻨﻮﻋﺔ‬‫ﻋﻠﻰ‬‫ﻣﻮﺿﻮﻉ‬‫ﺍﻝ‬media query..‫ﻭﻟﻠﻌﻠﻢ‬..‫ﻣﻦ‬‫ﺧﻼﻝ‬
‫ﻫﺬﺍ‬‫ﺍﻟﻤﻮﺿﻮﻉ‬،‫ﻟﻮﺣﺪﻩ‬‫ﻳﻤﻜﻨﻚ‬‫ﺃﻥ‬‫ﺗﺼﻨﻊ‬‫ﻣﻮﻗﻊ‬‫ﻣﺘﺠﺎﻭﺏ‬)Responsive(،‫ﻧﻌﻢ‬
‫ﻭﻻ‬‫ﺗﺘﻌﺠﺐ‬‫ﻣﻦ‬‫ﺫﻟﻚ‬..‫ﻓﻬﺬﺍ‬‫ﺍﻟﻨﻮﻉ‬‫ﻣﻦ‬،‫ﺍﻟﻤﻮﺍﻗﻊ‬‫ﻣﺎ‬‫ﻫﻮ‬‫ﺍﻻ‬‫ﻣﺠﻤﻮﻋﺔ‬‫ﻣﻦ‬
‫ﺻﻔﺤﺎﺕ‬‫ﺗﻨﺴﻴﻖ‬‫ﻣﺨﺘﻠﻔﺔ‬‫ﺗﻨﻄﻠﻖ‬‫ﻋﻨﺪ‬‫ﺗﺤﻘﻖ‬‫ﺷﺮﻁ‬‫ﻣﻌﻴﻦ‬..‫ﻧﻘﻮﻡ‬‫ﻋﻠﻰ‬‫ﺍﻓﺨﺎء‬
‫ﺟﺰﺋﻴﺔ‬‫ﻣﻌﻴﻨﺔ‬‫ﺃﻭ‬‫ﺍﻅﻬﺎﺭﻫﺎ‬,‫ﺗﺼﻐﻴﺮ‬‫ﺟﺰﺋﺔ‬‫ﺃﻭ‬‫ﺗﻜﺒﻴﺮﻫﺎ‬..‫ﻭﻫﻜﺬﺍ‬..
‫ﺷﺎﻫﺪ‬‫ﺍﻷﻣﺜﻠﺔ‬‫ﻣﻦ‬‫ﻫﻨﺎ‬:
‫ﺍﻟﻤﺜﺎﻝ‬1:)‫ﻳﻌﺮﺽ‬‫ﺍﻷﻣﺜﻠﺔ‬‫ﺍﻟﺴﺎﺑﻘﺔ‬‫ﻭﻳﻜﻮﻥ‬‫ﺍﻟﺘﻨﺴﻴﻖ‬‫ﺍﻟﺨﺎﺹ‬‫ﺑﺎﻝ‬css inline(.
‫ﺑﺨﺼﻮﺹ‬‫ﻟﻬﺬﺍ‬‫ﺍﻟﻤﺜﺎﻝ‬..‫ﻗﻢ‬‫ﺑﺘﺠﺮﺑﺔ‬‫ﺟﻌﻞ‬‫ﺍﺭﺗﻔﺎﻉ‬‫ﺍﻟﻤﺘﺼﻔﺢ‬‫ﺃﻛﺒﺮ‬‫ﻣﻦ‬‫ﺍﻟﻌﺮﺽ‬
..‫ﻭﺷﺎﻫﺪ‬‫ﺍﻟﻨﺘﻴﺠﺔ‬^_^..
‫ﻫﺬﻩ‬‫ﻋﻴﻨﺔ‬‫ﻋﺸﻮﺍﺋﻴﺔ‬‫ﻟﺒﻌﺾ‬‫ﺍﻟﻨﺘﺎﺋﺞ‬_^*
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

29. Media Query
‫ﺍﻟﻤﺜﺎﻝ‬2:‫ﻫﺬﺍ‬‫ﺍﻟﻤﺜﺎﻝ‬‫ﻣﻬﻢ‬‫ﺟﺪﺍ‬‫ﺑﻜﻞ‬‫ﺗﻔﺎﺻﻴﻠﻪ‬,‫ﻳﺮﺟﻰ‬‫ﺍﻹﻧﺘﺎﺑﻪ‬‫ﻟﻪ‬,‫ﻭﻳﺮﺟﻰ‬‫ﺍﻹﻧﺘﺒﺎﻩ‬
‫ﻟﺼﻔﺤﺎﺕ‬‫ﺍﻟﺘﻨﺴﻴﻖ‬‫ﺍﻟﺘﻲ‬‫ﺭﺑﻂ‬‫ﺑﻪ‬,‫ﻭﺍﻟﺘﺤﻜﻢ‬‫ﺑﺤﺠﻢ‬‫ﺍﻟﻤﺘﺼﻔﺢ‬..‫ﺣﺘﻰ‬‫ﺗﺮﻯ‬‫ﺍﻟﻨﺘﺎﺋﺞ‬
‫ﻭﻛﺄﻧﻚ‬‫ﺗﺴﺘﺨﺪﻡ‬‫ﺍﻟﻬﺎﺗﻒ‬‫ﺍﻟﻤﺤﻤﻮﻝ‬..
‫ﻣﻘﺘﻄﻔﺎﺕ‬‫ﻣﻦ‬‫ﺗﻄﺒﻴﻖ‬‫ﺍﻟﻤﺜﺎﻝ‬:)‫ﺍﻟﻔﻜﺮﺓ‬‫ﺃﻥ‬‫ﺗﻘﻮﻡ‬‫ﺑﺎﻟﺘﺠﺮﺑﺔ‬‫ﻭﺍﻟﺘﺤﻘﻖ‬‫ﺑﻨﻔﺴﻚ‬‫ﻣﻦ‬
‫ﺍﻟﺸﻴﻔﺮﺓ‬‫ﺍﻟﺒﺮﻣﺠﻴﺔ‬^_^(
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

30. Media Query
‫ﻣﻼﺣﻈﺔ‬:‫ﻳﻤﻜﻨﻚ‬‫ﺃﻳﻀﺎ‬‫ﺍﺳﺘﺨﺪﺍﻡ‬‫ﺑﻌﺾ‬‫ﺍﻷﺩﻭﺍﺕ‬‫ﻟﻌﺮﺽ‬‫ﺍﻟﻤﻮﻗﻊ‬‫ﺑﺄﺣﺠﺎﻡ‬‫ﺷﺎﺷﺎﺕ‬
‫ﻣﺨﺘﻠﻔﺔ‬‫ﻣﺜﻞ‬‫ﺍﺳﺘﺨﺪﺍﻡ‬‫ﺃﺣﺪ‬‫ﺍﻟﻤﻮﺍﻗﻊ‬me/.//mobiletest:http‫ﺃﻭ‬‫ﻳﻤﻜﻨﻚ‬‫ﺍﺳﺘﺨﺪﺍﻡ‬‫ﺃﺩﺍﺓ‬
‫ﻟﻤﺘﺼﻔﺤﻚ‬‫ﻣﺒﺎﺷﺮﺓ‬‫ﺃﻭ‬‫ﺗﺠﺪﻫﺎ‬‫ﻓﻲ‬‫ﺑﻌﺾ‬‫ﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬‫ﺑﺸﻜﻞ‬‫ﺍﻓﺘﺮﺍﺿﻲ‬
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(
MobileTest

31. aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(
‫��������ﺎء‬�‫ﺗﺸ‬ ‫��������ﺎ‬�‫ﻣ‬ ‫��������ﻞ‬�‫ﺗﻔﻌ‬ ‫��������ﺎﻡ‬�‫ﺍﻷﻳ‬ ‫ﺩﻉ‬.....‫��������ﺎء‬�‫ﺍﻟﻘﻀ‬ ‫��������ﻢ‬�‫ﺣﻜ‬ ‫ﺇﺫﺍ‬ ‫��������ﺎ‬�‫ﻧﻔﺴ‬ ‫��������ﺐ‬�‫ﻭﻁ‬
‫�����������ﺎﻟﻲ‬�‫ﺍﻟﻠﻴ‬ ‫�����������ﺔ‬�‫ﻟﺤﺎﺩﺛ‬ ‫�����������ﺰﻉ‬�‫ﺗﺠ‬ ‫ﻭﻻ‬.....‫�����������ﺎء‬�‫ﺑﻘ‬ ‫�����������ﺪﻧﻴﺎ‬�‫ﺍﻟ‬ ‫�����������ﻮﺍﺩﺙ‬�‫ﻟﺤ‬ ‫�����������ﺎ‬�‫ﻓﻤ‬
‫�������ﺪﺍ‬�‫ﺟﻠ‬ ‫�������ﻮﺍﻝ‬�‫ﺍﻷﻫ‬ ‫�������ﻰ‬�‫ﻋﻠ‬ ‫�������ﻼ‬�‫ﺭﺟ‬ ‫�������ﻦ‬�‫ﻭﻛ‬.....‫�������ﺎء‬�‫ﻭﺍﻟﻮﻓ‬ ‫�������ﻤﺎﺣﺔ‬�‫ﺍﻟﺴ‬ ‫�������ﻴﻤﺘﻚ‬�‫ﻭﺷ‬
‫�������ﺎ‬�‫ﺍﻟﺒﺮﺍﻳ‬ ‫�������ﻲ‬�‫ﻓ‬ ‫�������ﻚ‬�‫ﻋﻴﻮﺑ‬ ‫�������ﺮﺕ‬�‫ﻛﺜ‬ ‫ﻭﺇﻥ‬.....‫�������ﺎء‬�‫ﻏﻄ‬ ‫�������ﺎ‬�‫ﻟﻬ‬ ‫�������ﻮﻥ‬�‫ﻳﻜ‬ ‫ﺃﻥ‬ ‫�������ﺮﻙ‬�‫ﻭﺳ‬
‫���������ﺐ‬�‫ﻋﻴ‬ ‫���������ﻞ‬�‫ﻓﻜ‬ ‫���������ﺨﺎء‬�‫ﺑﺎﻟﺴ‬ ‫���������ﺘﺮ‬�‫ﺗﺴ‬.....‫���������ﺨﺎء‬�‫ﺍﻟﺴ‬ ‫���������ﻞ‬�‫ﻗﻴ‬ ‫���������ﺎ‬�‫ﻛﻤ‬ ‫���������ﻪ‬�‫ﻳﻐﻄﻴ‬
‫ﺫﻻ‬ ‫ﻗ������������ﻂ‬ ‫ﻟﻸﻋ������������ﺎﺩﻱ‬ ‫ﺗ������������ﺮ‬ ‫ﻭﻻ‬.....‫ﺑ������������ﻼء‬ ‫ﺍﻷﻋ������������ﺪﺍ‬ ‫ﺷ������������ﻤﺎﺗﺔ‬ ‫ﻓ������������ﺈﻥ‬
‫�������ﻞ‬�‫ﺑﺨﻴ‬ ‫�������ﻦ‬�‫ﻣ‬ ‫�������ﻤﺎﺣﺔ‬�‫ﺍﻟﺴ‬ ‫�������ﺮﺝ‬�‫ﺗ‬ ‫ﻭﻻ‬.....‫�������ﺎء‬�‫ﻣ‬ ‫�������ﺂﻥ‬�‫ﻟﻠﻈﻤ‬ ‫�������ﺎﺭ‬�‫ﺍﻟﻨ‬ ‫�������ﻲ‬�‫ﻓ‬ ‫�������ﺎ‬�‫ﻓﻤ‬
‫������ﺄﻧﻲ‬�‫ﺍﻟﺘ‬ ‫������ﻪ‬�‫ﻳﻨﻘﺼ‬ ‫������ﻴﺲ‬�‫ﻟ‬ ‫������ﻚ‬�‫ﻭﺭﺯﻗ‬.....‫������ﺎء‬�‫ﺍﻟﻌﻨ‬ ‫������ﺮﺯﻕ‬�‫ﺍﻟ‬ ‫������ﻲ‬�‫ﻓ‬ ‫������ﺪ‬�‫ﻳﺰﻳ‬ ‫������ﻴﺲ‬�‫ﻭﻟ‬
‫�����������ﺮﻭﺭ‬�‫ﺳ‬ ‫ﻭﻻ‬ ‫�����������ﺪﻭﻡ‬�‫ﻳ‬ ‫�����������ﺰﻥ‬�‫ﺣ‬ ‫ﻭﻻ‬.....‫�����������ﺎء‬�‫ﺭﺧ‬ ‫ﻭﻻ‬ ‫�����������ﻚ‬�‫ﻋﻠﻴ‬ ‫�����������ﺆﺱ‬�‫ﺑ‬ ‫ﻭﻻ‬
‫���������ﻮﻉ‬�‫ﻗﻨ‬ ‫���������ﺐ‬�‫ﻗﻠ‬ ‫ﺫﺍ‬ ‫���������ﺖ‬�‫ﻛﻨ‬ ‫���������ﺎ‬�‫ﻣ‬ ‫ﺇﺫﺍ‬.....‫���������ﻮﺍء‬�‫ﺳ‬ ‫���������ﺪﻧﻴﺎ‬�‫ﺍﻟ‬ ‫���������ﻚ‬�‫ﻭﻣﺎﻟ‬ ‫���������ﺖ‬�‫ﻓﺄﻧ‬
‫ﺍﻟﻤﻨﺎﻳ����������ﺎ‬ ‫ﺑﺴ����������ﺎﺣﺘﻪ‬ ‫ﻧﺰﻟ����������ﺖ‬ ‫ﻭﻣ����������ﻦ‬.....‫ﺳ����������ﻤﺎء‬ ‫ﻭﻻ‬ ‫ﺗﻘﻴ����������ﻪ‬ ‫ﺃﺭﺽ‬ ‫ﻓ����������ﻼ‬
‫ﻭﻟﻜ�����������ﻦ‬ ‫ﻭﺍﺳ�����������ﻌﺔ‬ ‫ﷲ‬ ‫ﻭﺃﺭﺽ‬.....‫ﺍﻟﻔﻀ�����������ﺎء‬ ‫ﺿ�����������ﺎﻕ‬ ‫ﺍﻟﻘﻀ�����������ﺎ‬ ‫ﻧ�����������ﺰﻝ‬ ‫ﺇﺫﺍ‬
‫�������ﻴﻦ‬�‫ﺣ‬ ‫�������ﻞ‬�‫ﻛ‬ ‫�������ﺪﺭ‬�‫ﺗﻐ‬ ‫�������ﺎﻡ‬�‫ﺍﻷﻳ‬ ‫ﺩﻉ‬.....‫ﺍﻟ��������ﺪﻭﺍء‬ ‫�������ﻮﺕ‬�‫ﺍﻟﻤ‬ ‫�������ﻦ‬�‫ﻋ‬ ‫�������ﻲ‬�‫ﻳﻐﻨ‬ ‫�������ﺎ‬�‫ﻓﻤ‬

32. SELECTORS
‫ﻭﺍﻵﻥ‬‫ﺑﻌﺪ‬‫ﺣﺪﻳﺜﻨﺎ‬‫ﺍﻟﺸﻴﻖ‬‫ﻋﻦ‬‫ﺍﻝ‬media query..‫ﻧﻨﻄﻠﻖ‬‫ﺍﻟﻰ‬‫ﻣﻮﺿﻮﻉ‬‫ﺟﺪﻳﺪ‬‫ﻭﺭﺍﺋﻊ‬
‫ﺃﻳﻀﺎ‬,‫ﻭﻫﻮ‬‫ﺍﻝ‬Selectors..!!
،‫ﻧﻌﻢ‬Selectors،‫ﻻ‬،‫ﺗﺘﻌﺠﺐ‬‫ﻓﻬﻨﺎﻙ‬‫ﻛﺜﻴﺮ‬‫ﻣﻦ‬‫ﺍﻝ‬Selectors‫ﺍﻟﺘﻲ‬‫ﺗﻢ‬‫ﺍﺿﺎﻓﺘﻬﺎ‬
‫ﻟﺘﺴﺎﻋﺪﻙ‬‫ﻋﻠﻰ‬‫ﺗﻨﺴﻴﻖ‬‫ﺻﻔﺤﺎﺕ‬،‫ﺍﻟﻮﻳﺐ‬‫ﻭﺑﺬﺍﺕ‬‫ﺍﻟﻮﻗﺖ‬‫ﻓﺈﻧﻬﺎ‬‫ﺗﺨﻔﻒ‬‫ﻋﻠﻴﻨﺎ‬‫ﻣﻦ‬
‫ﺍﺳﺘﺨﺪﺍﻡ‬‫ﺍﻟﺠﺎﻓﺎ‬‫ﺳﻜﺮﺑﺖ‬..‫ﻭﻛﻤﺜﺎﻝ‬‫ﻗﺪ‬‫ﺗﻜﻮﻥ‬‫ﺍﺳﺘﺨﺪﻣﺘﻪ‬‫ﻛﺜﻴﺮﺍ‬‫ﻭﻻ‬‫ﺗﻌﻠﻢ‬‫ﺃﻧﻪ‬css3
‫ﻭﻫﻮ‬last-child‫ﻛﻤﺜﺎﻝ‬^_^...‫ﻫﺬﺍ‬‫ﺍﻝ‬Selectors‫ﻫﻮ‬‫ﺃﺣﺪ‬‫ﺍﺿﺎﻓﺎﺕ‬‫ﺍﻝ‬css3
‫ﺍﻟﺠﺪﻳﺪﺓ‬‫ﻭﺍﻟﺮﺍﺋﻌﺔ‬^_^
‫ﺍﺫﻥ‬..‫ﻣﺎ‬‫ﻫﻲ‬‫ﺍﻹﺿﺎﻓﺎﺕ‬‫ﺍﻷﺧﺮﻯ؟‬
‫ﻫﺬﺍ‬‫ﻣﺎ‬‫ﺳﻨﺘﻌﻠﻤﻪ‬‫ﻣﻦ‬‫ﻫﺬﺍ‬‫ﺍﻟﻤﻮﺿﻮﻉ‬‫ﺑﺈﺫﻥ‬‫ﷲ‬‫ﺗﻌﺎﻟﻰ‬_^*
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

33. SELECTORS
(1element1 ~ element2:‫ﻭﻫﺬﻩ‬‫ﺍﻟﺨﺎﺻﻴﺔ‬‫ﺗﻌﻨﻲ‬,‫ﻗﻢ‬‫ﺑﺘﻨﻔﻴﺬ‬‫ﺗﻨﺴﻴﻖ‬‫ﻣﻌﻴﻦ‬‫ﻟﺠﻤﻴﻊ‬
‫ﻋﻨﺎﺻﺮ‬‫ﺍﻝ‬element2‫ﻓﻲ‬‫ﺣﺎﻝ‬‫ﺳﺒﻘﺖ‬‫ﻓﻲ‬‫ﺃﻱ‬‫ﻣﻜﺎﻥ‬‫ﺑﺼﻔﺤﺔ‬‫ﺏ‬element1
‫ﻭﻫﺬﺍ‬‫ﻳﻌﻨﻲ‬,‫ﺃﻧﻪ‬‫ﺍﺫﺍ‬‫ﺟﺎء‬‫ﺍﻝ‬element1‫ﻓﻲ‬‫ﺟﺰء‬‫ﻣﻌﻴﻦ‬‫ﺑﺎﻟﺼﻔﺤﺔ‬,‫ﻓﺈﻥ‬‫ﻛﻞ‬
‫ﻋﻨﺎﺻﺮ‬‫ﺍﻝ‬element2‫ﺍﻟﺘﻲ‬‫ﺗﺄﺗﻲ‬‫ﺑﻌﺪﻩ‬‫ﺳﺘﺄﺧﺬ‬،‫ﺍﻟﺘﻨﺴﻴﻖ‬‫ﻟﻜﻦ‬‫ﻳﺸﺘﺮﻁ‬‫ﻟﺬﻟﻚ‬‫ﺃﻥ‬
‫ﻳﻜﻮﻧﺎ‬‫ﺩﺍﺧﻞ‬‫ﻧﻔﺲ‬‫ﺍﻝ‬parent..
‫ﻭﺍﻵﻥ‬‫ﻟﻨﺸﺎﻫﺪ‬‫ﺍﻟﻤﺜﺎﻝ‬,‫ﻓﻬﻮ‬‫ﺳﻴﻮﺿﺢ‬‫ﺍﻟﻜﻼﻡ‬‫ﺍﻟﺴﺎﺑﻖ‬‫ﺑﺈﺫﻥ‬‫ﷲ‬‫ﺗﻌﺎﻟﻰ‬:
‫ﻣﻬﻢ‬‫ﺟﺪﺍ‬‫ﺃﻥ‬‫ﺗﻨﻈﺮ‬‫ﺍﻟﻰ‬‫ﺍﻟﺸﻴﻔﺮﺓ‬‫ﺍﻟﺒﺮﻣﺠﻴﺔ‬‫ﺍﻟﻤﺨﺼﺼﺔ‬‫ﻟﻠﻤﺜﺎﻝ‬‫ﻭﻣﻘﺎﺭﻧﺘﻬﺎ‬‫ﺑﺎﻟﻨﺘﺎﺋﺞ‬,
‫ﻟﺪﻳﻚ‬3‫ﺣﺎﻻﺕ‬‫ﻭﺿﻌﺘﻬﺎ‬..‫ﺷﺎﻫﺪ‬‫ﺍﻟﻔﻜﺮﺓ‬‫ﻣﻦ‬‫ﻛﻞ‬‫ﺣﺎﻟﺔ‬_^*
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

34. SELECTORS
(2[attribute^=value]:‫ﻫﺬﻩ‬‫ﺍﻟﺨﺎﺻﻴﺔ‬‫ﺍﻟﺠﻤﻴﻠﺔ‬‫ﺗﻌﻨﻲ‬‫ﺃﻋﻄﻲ‬‫ﺍﻟﺘﻨﺴﻴﻖ‬‫ﻟﺠﻤﻴﻊ‬
‫ﺍﻟﻌﻨﺎﺻﺮ‬‫ﺍﻟﺘﻲ‬‫ﻟﻬﺎ‬attribute‫ﻳﺒﺪﺃ‬‫ﺑﻘﻴﻤﺔ‬‫ﻣﻌﻴﻨﺔ‬‫ﺃﻭ‬‫ﻳﺴﺎﻭﻳﻬﺎ‬..^_^
‫ﻛﻤﺜﺎﻝ‬:div[class^=‘anees’]‫ﻓﺈﻧﻪ‬‫ﺳﻴﻘﻮﻡ‬‫ﺑﺘﻨﻔﻴﺬ‬‫ﺍﻟﺘﻨﺴﻴﻖ‬‫ﺍﻟﺬﻱ‬‫ﺃﺭﻳﺪﻩ‬‫ﻟﺠﻤﻴﻊ‬‫ﺍﻝ‬
div‫ﺍﻟﺘﻲ‬‫ﻟﺪﻳﻬﺎ‬‫ﻛﻼﺱ‬‫ﻳﺒﺪﺃ‬‫ﺏ‬anees^_^...
‫ﻟﻨﺸﺎﻫﺪ‬‫ﺍﻟﻤﺜﺎﻝ‬‫ﻣﻌﺎ‬:
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

35. SELECTORS
(3[attribute$=value]:‫ﻫﺬﻩ‬‫ﺍﻟﺨﺎﺻﻴﺔ‬‫ﺍﻟﺠﻤﻴﻠﺔ‬‫ﻫﻲ‬‫ﺍﻟﺨﺎﺻﻴﺔ‬‫ﺍﻟﻤﻌﺎﻛﺴﺔ‬‫ﻓﻲ‬
‫ﺍﻟﻮﻅﻴﻔﺔ‬‫ﻟﻠﺨﺎﺻﻴﺔ‬‫ﺍﻟﺴﺎﺑﻘﺔ‬,‫ﺃﻱ‬‫ﺃﻧﻬﺎ‬‫ﺗﻬﺘﻢ‬‫ﺃﻥ‬‫ﺗﺄﺗﻲ‬‫ﺍﻟﻘﻴﻤﺔ‬‫ﻣﺴﺎﻭﻳﺔ‬‫ﺃﻭ‬‫ﻓﻲ‬‫ﻧﻬﺎﻳﺔ‬
‫ﺍﻟﺨﺎﺻﻴﺔ‬,‫ﻛﻤﺜﺎﻝ‬div[class=‘anees’]‫ﻓﺴﻴﻜﻮﻥ‬‫ﺍﻟﺘﻨﺴﻴﻖ‬‫ﺍﻟﺠﺪﻳﺪ‬‫ﻟﺠﻤﻴﻊ‬‫ﺍﻝ‬div
‫ﺍﻟﺘﻲ‬‫ﺗﻨﺘﻬﻲ‬‫ﺏ‬anees‫ﺃﻭ‬‫ﺗﺴﺎﻭﻱ‬‫ﺃﻧﻴﺲ‬..‫ﻟﻨﻔﻢ‬‫ﺑﺘﺠﺮﺑﺔ‬‫ﺫﻟﻚ‬‫ﻋﻠﻰ‬‫ﺍﻟﻤﺜﺎﻝ‬
‫ﺍﻟﺴﺎﺑﻖ‬^_^
‫ﺍﻵﻥ‬:‫ﻟﻨﺸﺎﻫﺪ‬‫ﺍﻟﻤﺜﺎﻝ‬‫ﻣﻌﺎ‬_^*:
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

36. SELECTORS
(4[attribute*=value]:‫ﺑﻌﺪ‬‫ﺩﺭﺍﺳﺘﻚ‬‫ﻭﺍﻁﻼﻋﻚ‬‫ﻋﻠﻰ‬‫ﺍﻟﺨﺎﺻﻴﺘﻴﻦ‬،‫ﺍﻟﺴﺎﺑﻘﺘﻴﻦ‬‫ﻓﺈﻧﻚ‬
،‫ﺳﺘﺴﺄﻝ‬‫ﻣﺎﺫﺍ‬‫ﻟﻮ‬‫ﺃﺭﺩﺕ‬‫ﺃﻥ‬‫ﻳﻨﻔﺬ‬‫ﺍﻟﺘﻨﺴﻴﻖ‬‫ﻓﻲ‬‫ﺣﺎﻝ‬‫ﻭﺟﻮﺩ‬‫ﺍﻟﻘﻴﻤﺔ‬‫ﺍﻟﻤﻄﻠﻮﺑﺔ‬‫ﻓﻲ‬
‫ﺃﻱ‬‫ﺟﺰﺋﻴﺔ‬)‫ﺑﺪﺍﻳﺔ‬–‫ﻣﻨﺘﺼﻒ‬–‫ﻧﻬﺎﻳﺔ‬(‫ﺍﻟﻘﻴﻤﺔ‬_^*‫؟‬‫ﻫﻞ‬‫ﻫﺬﺍ‬‫ﻣﻤﻜﻦ؟‬
‫ﺍﻹﺟﺎﺑﺔ‬‫ﻫﻲ‬‫ﻧﻌﻢ‬^_^،‫ﻫﺬﺍ‬‫ﻣﻤﻜﻦ‬‫ﻣﻦ‬‫ﺧﻼﻝ‬‫ﺍﺳﺘﺨﺪﺍﻡ‬‫ﻫﺬﻩ‬،‫ﺍﻟﺨﺎﺻﻴﺔ‬‫ﻛﻤﺜﺎﻝ‬
‫ﻟﻮ‬‫ﻗﻤﻨﺎ‬‫ﺑﺎﺳﺘﺨﺪﺍﻡ‬div[class*=anees]‫ﻓﻲ‬‫ﺍﻟﻤﺜﺎﻝ‬،‫ﺍﻟﺴﺎﺑﻖ‬‫ﻓﺈﻧﻪ‬‫ﺳﻴﻘﻮﻡ‬‫ﺑﺘﻄﺒﻴﻖ‬
‫ﺍﻟﺘﻨﺴﻴﻖ‬‫ﻟﺠﻤﻴﻊ‬‫ﺍﻝ‬div‫ﺍﻟﺘﻲ‬‫ﺗﺤﺘﻮﻱ‬‫ﻛﻠﻤﺔ‬anees‫ﻭﻓﻲ‬‫ﺃﻱ‬‫ﻣﻮﻗﻊ‬*_*
‫ﻟﻨﺸﺎﻫﺪ‬‫ﺍﻟﻤﺜﺎﻝ‬‫ﻣﻌﺎ‬:
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

37. SELECTORS
(5:checked
‫ﻫﺬﻩ‬‫ﺍﻟﺨﺎﺻﻴﺔ‬‫ﺗﻘﻮﻡ‬‫ﻋﻠﻰ‬‫ﺍﻋﻄﺎء‬‫ﺍﻟﺘﻨﺴﻴﻖ‬‫ﻟﻮﺳﺎﺋﻞ‬‫ﺍﻹﺩﺧﺎﻝ‬)radio, checkbox(
‫ﺑﺎﻹﺿﺎﻓﺔ‬‫ﺍﻟﻰ‬option..‫ﻟﻜﻦ‬‫ﻫﺬﻩ‬‫ﺍﻟﺨﺎﺻﻴﺔ‬‫ﻻ‬‫ﺗﻘﻮﻡ‬‫ﻋﻠﻰ‬‫ﺗﻄﺒﻴﻖ‬‫ﺟﻤﻴﻊ‬
‫ﺍﻟﺘﻨﺴﻴﻘﺎﺕ‬..‫ﻓﻤﺜﻼ‬‫ﻻ‬‫ﻳﻌﻄﻲ‬color..‫ﻟﻜﻦ‬‫ﻳﺄﺧﺬ‬‫ﺍﻝ‬width‫ﻭﺍﻝ‬height
،‫ﻭﺍﻵﻥ‬‫ﻟﻨﺸﺎﻫﺪ‬‫ﻣﺜﺎﻻ‬‫ﻣﻌﺎ‬_^*.
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

38. SELECTORS
(6:disabled‫ﻭ‬:enabled
‫ﻫﺬﻩ‬‫ﺍﻟﺨﺼﺎﺋﺺ‬‫ﺗﻘﻮﻡ‬‫ﻋﻠﻰ‬‫ﺇﻋﻄﺎء‬‫ﺗﻨﺴﻴﻖ‬‫ﻣﻌﻴﻦ‬‫ﺇﻣﺎ‬‫ﻟﻠﻌﻨﺎﺻﺮ‬‫ﺍﻟﺘﻲ‬‫ﻓﻲ‬‫ﺣﺎﻟﺔ‬
disabled‫ﺃﻭ‬‫ﺍﻟﺘﻲ‬‫ﻓﻲ‬‫ﺣﺎﻟﺔ‬enable..‫ﻟﻨﺸﺎﻫﺪ‬‫ﻣﺜﺎﻻ‬‫ﻣﻌﺎ‬:
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

39. SELECTORS
(7:empty
‫ﻫﺬﻩ‬‫ﺍﻟﺨﺎﺻﻴﺔ‬‫ﺗﻘﻮﻡ‬‫ﻋﻠﻰ‬‫ﺇﻋﻄﺎء‬‫ﺗﻨﺴﻴﻖ‬‫ﻟﺠﻤﻴﻊ‬‫ﺍﻟﻌﻨﺎﺻﺮ‬‫ﺍﻟﺘﻲ‬‫ﻻ‬‫ﺗﺤﺘﻮﻱ‬
‫ﻧﺺ‬‫ﺑﺪﺍﺧﻠﻬﺎ‬)‫ﺑﺎﺧﺘﺼﺎﺭ‬tag‫ﻓﺎﺭﻏﺔ‬‫ﻣﻦ‬‫ﺃﻱ‬‫ﺍﻟﻨﺺ‬(..
‫ﻟﻨﺸﺎﻫﺪ‬‫ﺍﻟﻤﺜﺎﻝ‬‫ﻣﻌﺎ‬^_^:
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

40. SELECTORS
(8:first-of-type
‫ﻭﻅﻴﻔﺔ‬‫ﻫﺬﻩ‬‫ﺍﻟﺨﺎﺻﻴﺔ‬‫ﻫﻲ‬‫ﺇﻋﻄﺎء‬‫ﺗﻨﺴﻴﻖ‬‫ﻣﻌﻴﻦ‬‫ﻷﻭﻝ‬‫ﻋﻨﺼﺮ‬‫ﻣﻦ‬‫ﻧﻮﻉ‬‫ﻣﻌﻴﻦ‬
‫ﺑﻨﺎﺋﺎ‬‫ﻋﻠﻰ‬‫ﺍﻝ‬parent‫ﺍﻟﺨﺎﺹ‬‫ﺑﻪ‬..‫ﻟﻨﺸﺎﻫﺪ‬‫ﻣﺜﺎﻻ‬_^*:
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

41. aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(
‫ﻣﻦ‬ ‫ﺑﻚ‬ ‫ﺍﻋﻮﺫ‬ ‫ﺍﻧﻲ‬ ‫ﺍﻟﻠﻬﻢ‬‫ﺍﻟﻬﻢ‬‫ﻣ�ﻦ‬ ‫ﺑ�ﻚ‬ ‫ﻭﺍﻋ�ﻮﺫ‬ ‫ﻭﺍﻟﻜﺴ�ﻞ‬ ‫ﺍﻟﻌﺠ�ﺰ‬ ‫ﻣ�ﻦ‬ ‫ﺑ�ﻚ‬ ‫ﻭﺍﻋ�ﻮﺫ‬ ‫ﻭﺍﻟﺤ�ﺰﻥ‬
‫ﺍﻟﺮﺟﺎﻝ‬ ‫ﻭﻗﻬﺮ‬ ‫ﺍﻟﺪﻳﻦ‬ ‫ﻏﻠﺒﺔ‬ ‫ﻣﻦ‬ ‫ﺑﻚ‬ ‫ﻭﺍﻋﻮﺫ‬ ‫ﻭﺍﻟﺒﺨﻞ‬ ‫ﺍﻟﺠﺒﻦ‬

42. SELECTORS
(9:last-child
‫ﻫﺬﻩ‬‫ﺍﻟﺨﺎﺻﻴﺔ‬‫ﺍﻟﺮﺍﺋﻌﺔ‬..‫ﻗﺼﺔ‬‫ﺣﺐ‬‫ﻻ‬‫ﺗﻨﺘﻬﻲ‬‫ﻣﻊ‬‫ﺃﻱ‬‫ﻣﻮﻗﻊ‬‫ﺗﺤﺘﺎﺝ‬،‫ﺗﻨﺴﻴﻘﻪ‬
‫ﻓﻬﻲ‬‫ﺗﻘﻮﻡ‬‫ﻋﻠﻰ‬‫ﺇﻋﻄﺎﺋﻚ‬‫ﻣﺰﻳﺔ‬‫ﺭﺍﺋﻌﺔ‬‫ﻓﻲ‬‫ﺍﻟﺘﺤﻜﻢ‬‫ﺑﺘﻨﺴﻴﻖ‬‫ﺁﺧﺮ‬‫ﻋﻨﺼﺮ‬‫ﺿﻤﻦ‬
parent،‫ﻣﻌﻴﻦ‬‫ﺩﻭﻥ‬‫ﺍﻟﺤﺎﺟﺔ‬‫ﺍﻟﻰ‬،‫ﺳﻜﺮﺑﺖ‬‫ﻭﺑﻜﻞ‬‫ﺑﺴﺎﻁﺔ‬‫ﻓﻘﻂ‬last-child،
‫ﻭﻛﺜﻴﺮﺍ‬‫ﻣﺎ‬‫ﻧﺴﺘﺨﺪﻣﻬﺎ‬‫ﻣﻊ‬‫ﺍﻟﻘﻮﺍﺋﻢ‬^_^..‫ﻟﻨﺸﺎﻫﺪ‬‫ﻣﺜﺎﻻ‬^_^
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

43. SELECTORS
(10last-of-type:
‫ﺗﺴﺘﺨﺪﻡ‬‫ﻫﺬﻩ‬‫ﺍﻟﺨﺎﺻﻴﺔ‬‫ﻟﺘﻨﺴﻴﻖ‬‫ﺁﺧﺮ‬‫ﻋﻨﺼﺮ‬‫ﺿﻤﻦ‬Parent،‫ﻣﻌﻴﻦ‬‫ﻫﺬﻩ‬
‫ﺍﻟﺨﺎﺻﻴﺔ‬‫ﻫﻲ‬‫ﺍﻟﺨﺎﺻﻴﺔ‬‫ﺍﻟﻤﻘﺎﺑﻠﺔ‬‫ﻟﺨﺎﺻﻴﺔ‬first-of-type‫ﺍﻟﺘﻲ‬‫ﺫﻛﺮﻧﺎﻫﺎ‬‫ﺳﺎﺑﻘﺎ‬
_^*...‫ﻟﻨﺸﺎﻫﺪ‬‫ﻣﺜﺎﻻ‬‫ﻣﻌﺎ‬_^*
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

44. SELECTORS
(11:not(selector)‫ﻫﺬﻩ‬‫ﺍﻟﺨﺎﺻﻴﺔ‬‫ﺍﻟﺮﺍﺋﻌﺔ‬،‫ﻭﺍﻟﻤﻤﻴﺰﺓ‬‫ﻭﺍﻟﺘﻲ‬‫ﺍﺿﻴﻔﺖ‬‫ﺍﻟﻰ‬‫ﻋﺎﻟﻢ‬
‫ﺍﻟﺘﻨﺴﻴﻖ‬‫ﺑﺎﺳﺘﺨﺪﺍﻡ‬‫ﺍﻝ‬css3‫ﺗﻔﻮﻡ‬‫ﻋﻠﻰ‬‫ﺇﻋﻄﺎء‬‫ﺗﻨﺴﻴﻖ‬‫ﻣﻌﻴﻦ‬‫ﻟﺠﻤﻴﻊ‬‫ﺍﻟﻌﻨﺎﺻﺮ‬
‫ﺑﺎﺳﺘﺜﻨﺎء‬‫ﻣﺎ‬‫ﺗﻢ‬‫ﻭﺿﻌﻪ‬‫ﺩﺍﺧﻞ‬‫ﺍﻝ‬not_^*..‫ﻟﻨﺸﺎﻫﺪ‬‫ﻣﺜﺎﻻ‬*_*
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(
‫ﺑﻬﺎ‬ ‫ﻛﺘﺒﺖ‬ ‫ﺍﻟﺘﻲ‬ ‫ﻭﺍﻟﻄﺮﻳﻘﺔ‬ ‫ﺍﻟﻨﺘﺎﺋﺞ‬ ‫ﻻﺣﻆ‬
not‫ﺑﺎﻟﻤﺜﺎﻝ‬..‫ﺍﻟﻨﺘﺎﺋﺞ‬ ‫ﻭﺍﻧﻈﺮ‬..
‫ﺗﻼﺣﻆ‬ ‫ﻓﻜﻤﺎ‬..‫ﺗﻜﻠﻤﻨﺎ‬ ‫ﺍﻟﺘﻲ‬ ‫ﺍﻟﺨﺼﺎﺋﺺ‬
‫ﻋﻨﻬﺎ‬ ‫ﺳﻨﺘﻠﻜﻢ‬ ‫ﺃﻭ‬ ‫ﻋﻨﻬﺎ‬..‫ﺍﺳﺘﺨﺪﺍﻣﻬﺎ‬ ‫ﻳﻤﻜﻦ‬
‫ﻣﻊ‬not^_^

45. SELECTORS
(12:nth-child(n)‫ﻫﺬﻩ‬‫ﺍﻟﺨﺎﺻﻴﺔ‬‫ﺍﻟﺮﺍﺋﻌﺔ‬‫ﻭﺍﻟﻤﻬﻤﺔ‬‫ﻓﻲ‬‫ﺗﻨﺴﻴﻖ‬،‫ﺍﻟﺼﻔﺤﺎﺕ‬‫ﺗﻤﻜﻨﻨﺎ‬
‫ﻣﻦ‬‫ﺧﻼﻟﻬﺎ‬‫ﺗﺤﺪﻳﺪ‬child‫ﻣﻌﻴﻦ‬‫ﻹﻋﻄﺎﺋﻪ‬‫ﺍﻟﺘﻨﺴﻴﻖ‬..‫ﻣﺜﻼ‬:nth-child(2)‫ﺃﻱ‬‫ﻗﻢ‬
‫ﺑﺎﻋﻄﺎء‬‫ﺍﻟﺘﻨﺴﻴﻖ‬‫ﻟﻞ‬child‫ﺍﻟﺜﺎﻧﻲ‬..*_*..‫ﻭﺑﻬﺬﺍ‬‫ﻳﻤﻜﻨﻚ‬‫ﺍﻟﺘﺤﻜﻢ‬‫ﻓﻲ‬‫ﻋﻨﺎﺻﺮ‬
‫ﻣﻌﻴﻨﺔ‬‫ﺑﻨﺎﺋﺎ‬‫ﻋﻠﻰ‬‫ﻗﻮﺍﻋﺪ‬‫ﻳﻤﻜﻨﻚ‬‫ﺃﻥ‬‫ﺗﺤﺪﻳﺪﻫﺎ‬..
‫ﺍﻝ‬n‫ﻳﺮﻣﺰ‬‫ﺍﻟﻰ‬‫ﺍﻟﻘﻴﻤﺔ‬‫ﺍﻟﺘﻲ‬‫ﺳﻨﺤﺪﺩ‬‫ﻣﻦ‬‫ﺧﻼﻟﻬﺎ‬‫ﺍﻟﻌﻨﺼﺮ‬‫ﺍﻟﺬﻱ‬‫ﺳﻴﺄﺧﺬ‬
،‫ﺍﻟﺘﻨﺴﻴﻖ‬‫ﻭﺍﻷﺟﻤﻞ‬‫ﻣﻦ‬‫ﺫﻟﻚ‬..‫ﻫﻮ‬‫ﺇﻣﻜﺎﻧﻴﺔ‬‫ﻭﺿﻊ‬‫ﻣﻌﺎﺩﻟﺔ‬‫ﻣﺜﻞ‬3n + 3‫ﻓﻬﺬﻩ‬
‫ﺗﻌﻨﻲ‬3 * 0 + 3‫ﻳﺴﺎﻭﻱ‬3،‫ﺛﻢ‬3 * 1 + 3=6‫ﻓﻬﺬﺍ‬‫ﻳﻌﻨﻲ‬‫ﺃﻧﻪ‬‫ﻛﻠﻤﺎ‬‫ﺍﺯﺩﺍﺩﺕ‬‫ﺃﻭ‬
‫ﺗﻀﺎﻋﻒ‬‫ﻋﺪﺩ‬‫ﺍﻟﻌﻨﺎﺻﺮ‬..‫ﻳﻤﻜﻨﻚ‬‫ﺍﺳﺘﺨﺪﺍﻣﻬﺎ‬‫ﻛﻤﻌﺎﺩﻟﺔ‬‫ﺗﻌﻄﻲ‬‫ﺍﻟﺘﻨﺴﻴﻖ‬
‫ﻟﻤﻀﺎﻋﻔﺎﺕ‬‫ﺍﻝ‬3^_^..‫ﻟﻨﺸﺎﻫﺪ‬‫ﻣﺜﺎﻻ‬‫ﻋﻤﻠﻴﺎ‬‫ﻋﻠﻰ‬‫ﺫﻟﻚ‬_^*
‫ﻳﻤﻜﻨﻚ‬‫ﺍﺳﺘﺨﺪﺍﻡ‬‫ﻋﻤﻠﻴﺎﺕ‬‫ﺍﻟﺠﻤﻴﻊ‬‫ﻭﺍﻟﻄﺮﺡ‬..‫ﻛﻤﺎ‬‫ﻳﻤﻜﻨﻚ‬‫ﺍﺳﺘﺨﺪﺍﻡ‬‫ﻛﻠﻤﺔ‬odd‫ﺃﻭ‬
even‫ﻹﻋﻄﺎء‬‫ﺍﻟﺘﻨﺴﻴﻖ‬‫ﻟﺼﻔﺮﻑ‬‫ﻓﺮﺩﻳﺔ‬‫ﺃﻭ‬‫ﺯﻭﺟﻴﺔ‬^_^...
‫ﺃﻭ‬‫ﺍﺳﺘﺨﺪﺍﻡ‬‫ﻋﺪﺩ‬‫ﺻﺤﻴﺢ‬‫ﻣﺒﺎﺷﺮﺓ‬_^*..‫ﻭﺍﻟﺨﺎﺻﻴﺔ‬‫ﺍﻟﻤﻘﺎﺑﻠﺔ‬‫ﻟﻬﺬﻩ‬‫ﺍﻟﺨﺎﺻﻴﺔ‬
‫ﻫﻲ‬:nth-last-child(n)...‫ﻭﺍﻵﻥ‬‫ﻟﻨﺸﺎﻫﺪ‬‫ﺃﻣﺜﻠﺔ‬‫ﻋﻠﻰ‬‫ﺫﻟﻚ‬^_^
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

46. SELECTORS
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(
‫ﻋﻠﻰ‬ ‫ﺗﻔﻌﻴﻠﻪ‬ ‫ﺗﻢ‬ ‫ﺍﻟﺘﻨﺴﻴﻖ‬ ‫ﻓﺈﻥ‬ ‫ﺗﻼﺣﻆ‬ ‫ﻛﻤﺎ‬
‫ﺍﻟﻌﻨﺼﺮ‬4‫ﻫﻲ‬ ‫ﺍﻟﻤﻌﺎﺩﻟﺔ‬ ‫ﻷﻥ‬ ‫ﻭﺍﻟﺜﺎﻣﻦ‬4n
‫ﻳﻌﻨﻲ‬ ‫ﻭﻫﺬﺍ‬4*1‫ﻭ‬4*2..
‫ﺃﻣﺎ‬4*3‫ﻣﻮﺟﻮﺩﺓ‬ ‫ﻏﻴﺮ‬)12(‫ﻳﺘﻨﻬﻲ‬ ‫ﻟﺬﻟﻚ‬
‫ﻋﻨﺪ‬ ‫ﺍﻟﺘﻨﺴﻴﻖ‬Anees 8

47. SELECTORS
(12:only-of-type‫ﺗﺴﺘﺨﺪﻡ‬‫ﻫﺬﻩ‬‫ﺍﻟﺨﺎﺻﻴﺔ‬‫ﻹﻋﻄﺎء‬‫ﺗﻨﺴﻴﻖ‬‫ﻣﻌﻴﻦ‬‫ﻟﻌﻨﺼﺮ‬‫ﻳﻜﻮﻥ‬‫ﻫﻮ‬
‫ﺍﻟﻮﺣﻴﺪ‬‫ﺍﻟﺬﻱ‬‫ﺟﺎء‬‫ﺿﻤﻦ‬‫ﺍﻝ‬parents‫ﻣﻦ‬،‫ﻧﻮﻋﻪ‬‫ﻋﻠﻰ‬‫ﺳﺒﻴﻞ‬،‫ﺍﻟﻤﺜﺎﻝ‬‫ﻟﻮ‬‫ﻛﺎﻥ‬
‫ﻫﺬﺍ‬‫ﺍﻟﻌﻨﺼﺮ‬‫ﻫﻮ‬‫ﺍﻝ‬<h1>‫ﻓﺈﻧﻪ‬‫ﻟﻴﺄﺧﺬ‬‫ﺍﻟﺘﻨﺴﻴﻖ‬‫ﻳﺠﺐ‬‫ﺃﻥ‬‫ﻳﻜﻮﻥ‬‫ﺩﺍﺧﻞ‬‫ﺍﻝ‬div
)‫ﻋﻠﻰ‬‫ﻓﺮﺽ‬‫ﺃﻧﻪ‬parent(‫ﻓﻘﻂ‬<h1>‫ﻟﻤﺮﺓ‬،‫ﻭﺍﺣﺪﺓ‬‫ﻭﻳﻤﻜﻦ‬‫ﻭﺟﻮﺩ‬‫ﺃﻱ‬tag‫ﺁﺧﺮ‬
‫ﻓﻬﺬﻩ‬‫ﻟﻴﺴﺖ‬‫ﻣﺸﻜﻠﺔ‬‫ﻟﻬﺬﻩ‬‫ﺍﻝ‬‫ﺍﻟﺨﺎﺻﻴﺔ‬_^*..‫ﻭﺑﻨﻔﺲ‬‫ﺍﻟﻔﻜﺮﺓ‬‫ﺗﺘﻮﺍﺟﺪ‬‫ﺧﺎﺻﻴﺔ‬
only-child‫ﻟﻜﻦ‬‫ﻫﺬﻩ‬‫ﺍﻟﺨﺎﺻﻴﺔ‬‫ﺗﺨﺘﻠﻒ‬‫ﻋﻦ‬‫ﺍﻟﺴﺎﺑﻘﺔ‬‫ﺑﺄﻧﻬﺎ‬‫ﻳﺠﺐ‬‫ﺃﻥ‬‫ﺗﻜﻮﻥ‬‫ﺍﻹﺑﻦ‬
‫ﺍﻟﻮﺣﻴﺪ‬‫ﺩﺍﺧﻞ‬‫ﺍﻝ‬parent‫ﻭﻻ‬‫ﻳﻮﺟﺪ‬‫ﺃﻱ‬tag‫ﺁﺧﺮ‬‫ﺃﻳﻀﺎ‬‫ﻣﻌﻬﺎ‬^_^
‫ﻭﺍﻵﻥ‬‫ﻟﻨﺸﺎﻫﺪ‬‫ﺃﻣﺜﻠﺔ‬‫ﻣﺘﻨﻮﻋﺔ‬‫ﻋﻠﻰ‬‫ﺍﻟﺨﺎﺻﻴﺘﻴﻦ‬‫ﺍﻟﺴﺎﺑﻘﺘﻴﻦ‬_^*
‫ﻣﻼﺣﻈﺔ‬‫ﻣﻬﻤﺔ‬:‫ﻻ‬‫ﺗﻨﺴﻰ‬‫ﺗﻄﺒﻴﻖ‬،‫ﺍﻷﻣﺜﻠﺔ‬‫ﻭﺗﺠﺮﺑﺔ‬‫ﺍﺣﺘﻤﺎﻻﺕ‬،‫ﻣﺘﻨﻮﻋﺔ‬‫ﻛﻤﺎ‬
‫ﺃﺭﺟﻮ‬‫ﺃﻥ‬‫ﺗﻨﺘﺒﻪ‬‫ﺍﻟﻰ‬‫ﺍﻟﺸﻴﻔﺮﺓ‬‫ﺍﻟﺒﺮﻣﺠﻴﺔ‬‫ﺍﻟﺨﺎﺻﺔ‬‫ﺑﻜﻞ‬‫ﻣﺜﺎﻝ‬..
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

48. SELECTORS
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

49. SELECTORS
(13:required&:optional
‫ﺧﺎﺻﻴﺘﺎﻥ‬‫ﻣﻦ‬‫ﺍﻹﺳﻢ‬‫ﻟﻮﺣﺪﻩ‬^_^،‫ﻧﺴﺘﻨﺘﺞ‬‫ﻭﻅﻴﻔﺔ‬‫ﻛﻞ‬‫ﻣﻨﻬﺎ‬^_^،،‫ﻧﻌﻢ‬
‫ﻓﻮﻅﻴﻔﺘﻬﻤﺎ‬‫ﻫﻲ‬‫ﺍﻋﻄﺎء‬‫ﺗﻨﺴﻴﻖ‬‫ﻟﻠﺤﻘﻞ‬‫ﺍﻹﻟﺰﺍﻣﻴﺔ‬)required(‫ﻭﻏﻴﺮ‬
‫ﺍﻹﻟﺰﺍﻣﻴﺔ‬)optional(..‫ﻟﻨﺸﺎﻫﺪ‬‫ﻣﺜﺎﻻ‬_^*
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

50. SELECTORS
(14:target
،‫ﺍﻵﻥ‬‫ﺁﺧﺮ‬‫ﺧﺎﺻﻴﺔ‬‫ﺳﻨﺘﺤﺪﺙ‬‫ﻋﻨﻬﺎ‬‫ﺑﺈﺫﻥ‬‫ﷲ‬‫ﺗﻌﺎﻟﻰ‬‫ﻫﻲ‬‫ﻫﺬﻩ‬،‫ﺍﻟﺨﺎﺻﻴﺔ‬‫ﻭﻫﻲ‬
‫ﺗﻘﻮﻡ‬‫ﻋﻠﻰ‬‫ﺍﻋﻄﺎء‬‫ﺗﻨﺴﻴﻖ‬‫ﻣﻌﻴﻦ‬‫ﻟﻌﻨﺼﺮ‬،‫ﻣﺎ‬‫ﻫﺬﺍ‬‫ﺍﻟﻌﻨﺼﺮ‬‫ﻳﺠﺐ‬‫ﺃﻥ‬‫ﻳﻜﻮﻥ‬
target،‫ﻭﻟﻲ‬‫ﻳﺘﻢ‬‫ﺫﻟﻚ‬‫ﻳﺠﺐ‬‫ﺃﻥ‬‫ﺗﺘﻮﺍﻓﺮ‬،‫ﺷﺮﻭﻁ‬‫ﻋﻠﻰ‬‫ﺳﺒﻴﻞ‬‫ﺍﻟﻤﺜﺎﻝ‬..‫ﻭﺟﻮﺩ‬
‫ﻋﻨﺼﺮ‬‫ﻟﻪ‬id‫ﻭﺭﺍﺑﻂ‬‫ﻳﻜﻮﻥ‬‫ﺍﻝ‬href‫ﻳﺤﺘﻮﻱ‬‫ﻗﻴﻤﺔ‬‫ﺍﻝ‬id‫ﻟﻠﻌﻨﺼﺮ‬...‫ﻭﺑﻬﺬﺍ‬
‫ﻳﻜﻮﻥ‬‫ﺍﻟﻌﻨﺼﺮ‬‫ﻫﻮ‬target‫ﻟﻬﺬﺍ‬‫ﺍﻝ‬anchor..
‫ﻟﻨﺸﺎﻫﺪ‬‫ﻣﺜﺎﻻ‬‫ﻣﻌﺎ‬^___^)‫ﻋﻨﺪ‬‫ﺗﻄﺒﻴﻖ‬‫ﺍﻟﻤﺜﺎﻝ‬‫ﺍﻧﺘﺒﻪ‬‫ﻟﻞ‬url(
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

51. aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(
]‫ﺍﻟﺒﻘﺮﺓ‬/286[
‫ﺍﻟﺮﺟﻴﻢ‬ ‫ﺍﻟﺸﻴﻄﺎﻥ‬ ‫ﻣﻦ‬ ‫ﻮﺫ ﺑﺎہﻠﻟ‬
‫ﻥ‬ِ‫ﺇ‬ ‫ﺎ‬َ‫ﻧ‬ْ‫ﺬ‬ِ‫َﺍﺧ‬‫ﺆ‬ُ‫ﺗ‬ َ‫ﻻ‬ ‫ﺎ‬َ‫ﻨ‬‫ﱠ‬‫ﺑ‬َ‫ﺭ‬ ْ‫ﺖ‬َ‫ﺒ‬َ‫ﺴ‬َ‫ﺘ‬ْ‫ﻛ‬‫ﺍ‬ ‫ﺎ‬َ‫ﻣ‬ ‫ﺎ‬َ‫ﻬ‬ْ‫ﻴ‬َ‫ﻠ‬َ‫ﻋ‬َ‫ﻭ‬ ْ‫ﺖ‬َ‫ﺒ‬َ‫ﺴ‬َ‫ﻛ‬ ‫ﺎ‬َ‫ﻣ‬ ‫ﺎ‬َ‫ﻬ‬َ‫ﻟ‬ ‫ﺎ‬َ‫ﻬ‬َ‫ﻌ‬ْ‫ﺳ‬ُ‫ﻭ‬ ‫ﱠ‬‫ﻻ‬ِ‫ﺇ‬ ‫ﺎ‬ً‫ﺴ‬ْ‫ﻔ‬َ‫ﻧ‬ ُ ‫ﱠ‬‫ﷲ‬ ُ‫ﻒ‬‫ﱢ‬‫ﻠ‬َ‫ﻜ‬ُ‫ﻳ‬ َ‫ﻻ‬
‫ﺎ‬َ‫ﻨ‬‫ﱠ‬‫ﺑ‬َ‫ﺭ‬ ‫ﺎ‬َ‫ﻨ‬ِ‫ﻠ‬ْ‫ﺒ‬َ‫ﻗ‬ ‫ﻦ‬ِ‫ﻣ‬ َ‫ﻳﻦ‬ِ‫ﺬ‬‫ﱠ‬‫ﻟ‬‫ﺍ‬ ‫ﻰ‬َ‫ﻠ‬َ‫ﻋ‬ ُ‫ﻪ‬َ‫ﺘ‬ْ‫ﻠ‬َ‫ﻤ‬َ‫ﺣ‬ ‫ﺎ‬َ‫ﻤ‬َ‫ﻛ‬ ‫ﺍ‬ً‫ﺮ‬ْ‫ﺻ‬ِ‫ﺇ‬ ‫ﺎ‬َ‫ﻨ‬ْ‫ﻴ‬َ‫ﻠ‬َ‫ﻋ‬ ْ‫ﻞ‬ِ‫ﻤ‬ ْ‫َﺤ‬‫ﺗ‬ َ‫ﻻ‬َ‫ﻭ‬ ‫ﺎ‬َ‫ﻨ‬‫ﱠ‬‫ﺑ‬َ‫ﺭ‬ ‫ﺎ‬َ‫ﻧ‬ْ‫ﺄ‬َ‫ﻄ‬ ْ‫ﺧ‬َ‫ﺃ‬ ْ‫ﻭ‬َ‫ﺃ‬ ‫ﺎ‬َ‫ﻨ‬‫ﻴ‬ِ‫ﺴ‬‫ﱠ‬‫ﻧ‬َ‫ﻻ‬َ‫ﻭ‬
‫ﻰ‬َ‫ﻠ‬َ‫ﻋ‬ ‫ﺎ‬َ‫ﻧ‬ْ‫ﺮ‬ُ‫ﺼ‬‫ﺎﻧ‬َ‫ﻓ‬ ‫ﺎ‬َ‫ﻧ‬‫ﻻ‬ْ‫ﻮ‬َ‫ﻣ‬ َ‫ﻧﺖ‬َ‫ﺃ‬ ‫ﺎ‬َ‫ﻨ‬ْ‫ﻤ‬َ‫ﺣ‬ْ‫ﺍﺭ‬َ‫ﻭ‬ ‫ﺎ‬َ‫ﻨ‬َ‫ﻟ‬ ْ‫ﺮ‬ِ‫ﻔ‬ْ‫ﻏ‬‫ﺍ‬َ‫ﻭ‬ ‫ﺎ‬‫ﱠ‬‫ﻨ‬َ‫ﻋ‬ ُ‫ْﻒ‬‫ﻋ‬‫ﺍ‬َ‫ﻭ‬ ِ‫ﻪ‬ِ‫ﺑ‬ ‫ﺎ‬َ‫ﻨ‬َ‫ﻟ‬ َ‫ﺔ‬َ‫ﻗ‬‫ﺎ‬َ‫ﻁ‬ َ‫ﻻ‬ ‫ﺎ‬َ‫ﻣ‬ ‫ﺎ‬َ‫ﻨ‬ْ‫ﻠ‬‫ﱢ‬‫ﻤ‬َ‫ﺤ‬ُ‫ﺗ‬
َ‫ﻳﻦ‬ِ‫ﺮ‬ِ‫ﻓ‬‫ﺎ‬َ‫ﻜ‬ْ‫ﻟ‬‫ﺍ‬ ِ‫ﻡ‬ْ‫ﻮ‬َ‫ﻘ‬ْ‫ﻟ‬‫ﺍ‬
‫ﺍﻟﻌﻈﻴﻢ‬ ‫ﷲ‬ ‫ﺻﺪﻕ‬

52. Web Fonts
‫ﻓﻲ‬‫ﻫﺬﺍ‬‫ﺍﻟﻤﻮﺿﻮﻉ‬‫ﺳﻨﺘﺤﺪﺙ‬‫ﻋﻦ‬‫ﺃﻣﺮ‬‫ﺭﺍﺋﻊ‬،‫ﺟﺪﺍ‬‫ﻭﻣﻬﻢ‬‫ﻓﻲ‬‫ﻋﺎﻟﻢ‬‫ﺗﻄﻮﻳﺮ‬‫ﻭﺗﺼﻤﻴﻢ‬
‫ﺍﻟﻤﻮﺍﻗﻊ‬_^*،‫ﻧﻌﻢ‬‫ﺳﻨﺘﺤﺪﺙ‬‫ﻋﻦ‬‫ﺍﻟﺨﻄﻮﻁ‬^_^...
‫ﺇﻥ‬‫ﻣﺎ‬‫ﻳﻘﻮﻡ‬‫ﺑﻪ‬،‫ﺍﻟﻤﺼﻤﻤﻮﻥ‬‫ﻫﻮ‬‫ﺇﻋﻄﺎﺋﻚ‬‫ﺗﺼﻤﻴﻢ‬‫ﺑﺄﺷﻜﺎﻝ‬‫ﻭﺍﻷﻭﺍﻥ‬،‫ﻣﻌﻴﻨﺔ‬
‫ﺑﺎﻹﺿﺎﻓﺔ‬‫ﺍﻟﻰ‬‫ﺧﻂ‬‫ﺗﻢ‬‫ﺍﺳﺘﺨﺪﺍﻣﻪ‬‫ﻟﻴﻌﻄﻲ‬‫ﺍﻟﺘﺼﻤﻴﻢ‬،‫ﺭﻭﻧﻘﻪ‬‫ﻭﻳﻜﻮﻥ‬‫ﻫﺬﺍ‬‫ﺍﻷﻣﺮ‬‫ﻋﺎﺩﺓ‬
‫ﻋﻠﻰ‬‫ﺷﻜﻞ‬PSD File^_^..‫ﻭﺑﻬﺬﺍ‬‫ﻳﻤﻜﻨﻚ‬‫ﺗﺤﺪﻳﺪ‬‫ﻭﺗﻔﺼﻴﻞ‬‫ﻭﺍﻗﺘﻄﺎﻉ‬‫ﺍﻷﺟﺰﺍء‬‫ﺍﻟﺘﻲ‬
‫ﺗﺮﻳﺪ‬..‫ﻭﺃﻫﻤﻬﺎ‬‫ﺑﺎﻟﻨﺴﺒﺔ‬‫ﻟﻤﻮﺿﻮﻋﻨﺎ‬‫ﺍﻵﻥ‬..‫ﻫﻮ‬‫ﺍﻟﺨﻂ‬_^*
‫ﻛﺎﻥ‬‫ﻓﻲ‬‫ﺍﻟﺴﺎﺑﻖ‬‫ﻳﺠﺐ‬‫ﺃﻥ‬‫ﻳﺘﻮﻓﺮ‬‫ﺍﻟﺨﻂ‬‫ﻟﺪﻯ‬‫ﺟﻬﺎﺯ‬‫ﺍﻟﻌﻤﻴﻞ‬‫ﺣﺘﻰ‬‫ﻳﻌﻤﻞ‬‫ﺑﺸﻜﻞ‬،‫ﺻﺤﻴﺢ‬
‫ﻟﻜﻦ‬‫ﻫﺬﺍ‬‫ﺍﻟﻜﻼﻡ‬‫ﺃﺻﺒﺢ‬‫ﻣﻦ‬‫ﺍﻟﻤﺎﺿﻲ‬‫ﺑﻮﺟﻮﺩ‬‫ﺍﻝ‬css3،‫ﻓﻤﻦ‬‫ﺧﻼﻟﻬﺎ‬‫ﺗﻢ‬‫ﺗﺼﻤﻴﻢ‬module
‫ﻭﻅﻴﻔﺘﻪ‬‫ﺍﻟﺴﻤﺎﺡ‬‫ﻟﻠﻤﺘﺼﻔﺢ‬‫ﺑﺎﺳﺘﺨﺪﺍﻡ‬‫ﺧﻂ‬‫ﻣﻌﻴﻦ‬‫ﺩﻭﻥ‬‫ﺃﻥ‬‫ﻳﻜﻮﻥ‬‫ﻣﻮﺟﻮﺩﺍ‬‫ﻋﻠﻰ‬‫ﺟﻬﺎﺯ‬
،‫ﺍﻟﻌﻤﻴﻞ‬‫ﻭﻛﻞ‬‫ﻣﺎ‬‫ﻳﻠﺰﻣﻨﺎ‬‫ﻫﻮ‬‫ﻭﺿﻊ‬‫ﻣﻠﻔﺎﺕ‬‫ﺍﻟﺨﻂ‬‫ﻋﻠﻰ‬server‫ﻭﻣﻦ‬‫ﺛﻢ‬‫ﺗﻀﻤﻴﻨﻬﺎ‬‫ﻓﻲ‬
‫ﺻﻔﺤﺎﺕ‬‫ﺍﻟﺘﻨﺴﻴﻖ‬‫ﻟﺪﻳﻨﺎ‬^______^
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

53. Web Fonts
‫ﺍﻵﻥ‬‫ﻭﺍﻟﺴﺆﺍﻝ‬‫ﺍﻷﻫﻢ‬^_^،‫ﻣﺎ‬‫ﻫﻲ‬‫ﻫﺬﻩ‬‫ﺍﻟﺨﺎﺻﻴﺔ؟‬
‫ﺍﻟﺠﻮﺍﺏ‬‫ﻫﻮ‬:@font-face Rule
‫ﻭﺍﻝ‬rules‫ﻫﻨﺎ‬‫ﻫﻲ‬‫ﺍﻟﺨﻂ‬‫ﺍﻟﺬﻱ‬‫ﻧﺮﻳﺪ‬،‫ﺍﺳﺘﺨﺪﺍﻣﻪ‬‫ﺍﻹﻣﺘﺪﺍﺩﺍﺕ‬‫ﺍﻟﻤﺘﺎﺣﺔ‬،‫ﻟﻪ‬
‫ﻭﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬‫ﺍﻟﺘﻲ‬‫ﺗﺪﻋﻢ‬‫ﻫﺬﺍ‬‫ﺍﻟﺨﻂ‬..‫ﺑﺎﻹﺿﺎﻓﺔ‬‫ﺍﻟﻰ‬‫ﻣﻮﻗﻊ‬‫ﺍﻟﻤﻠﻒ‬‫ﻋﻠﻰ‬‫ﺍﻟﺴﻴﺮﻓﺮ‬
^_^...‫ﺷﺎﻫﺪ‬‫ﻫﺬﺍ‬‫ﺍﻟﻤﺜﺎﻝ‬_^*:
.1‫ﻫﻨﺎ‬‫ﻳﺘﻢ‬‫ﻭﺿﻊ‬‫ﺍﺳﻢ‬،‫ﺍﻟﺨﻂ‬‫ﻫﺬﺍ‬‫ﺍﻹﺳﻢ‬‫ﺍﻟﺬﻱ‬‫ﺳﺘﻘﻮﻡ‬،‫ﺑﻮﺿﻌﻪ‬‫ﻫﻮ‬‫ﺍﻟﺬﻱ‬‫ﺳﺘﻘﻮﻡ‬
‫ﺑﺎﺳﺘﺨﺪﺍﻣﻪ‬‫ﻹﻋﻄﺎء‬‫ﺗﻨﺴﻴﻖ‬‫ﺍﻟﺨﻂ‬‫ﻷﻱ‬‫ﻋﻨﺼﺮ‬‫ﺃﺛﻨﺎء‬‫ﻋﻤﻠﻚ‬‫ﻓﻲ‬،‫ﺍﻟﻤﻮﻗﻊ‬
‫ﺑﺎﻹﺿﺎﻓﺔ‬‫ﺍﻟﻰ‬‫ﺫﻟﻚ‬‫ﻳﻤﻜﻨﻚ‬‫ﻛﺘﺎﺑﺔ‬‫ﻫﺬﺍ‬‫ﺍﻹﺳﻢ‬‫ﻣﻦ‬‫ﻣﻘﻄﻊ‬‫ﻭﺍﺣﺪ‬‫ﺃﻭ‬‫ﻣﻦ‬‫ﺃﻛﺜﺮ‬‫ﻣﻦ‬
‫ﻣﻘﻄﻊ‬‫ﺍﺫﺍ‬‫ﺃﺭﺩﺕ‬،‫ﺫﻟﻚ‬‫ﻭﻟﻜﻦ‬‫ﻳﺠﺐ‬‫ﻋﻠﻴﻚ‬‫ﺃﻥ‬‫ﺗﻘﻮﻡ‬‫ﺑﻮﺿﻊ‬‫ﺍﻹﺳﻢ‬‫ﺩﺍﺧﻞ‬““
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

54. Web Fonts
‫ﻣﺜﺎﻝ‬‫ﺑﺴﻴﻂ‬‫ﻋﻠﻰ‬‫ﺍﻟﻤﻮﺿﻮﻉ‬:
(2‫ﻫﺬﻩ‬‫ﺍﻟﺨﺎﺻﻴﺔ‬‫ﻫﻲ‬‫ﺍﻟﺘﻲ‬‫ﺗﺨﺒﺮ‬‫ﺍﻟﻤﺘﺼﻔﺢ‬‫ﻋﻦ‬‫ﻣﻮﻗﻊ‬‫ﻭﺟﻮﺩ‬‫ﺍﻟﺨﻂ‬‫ﻋﻠﻰ‬
،‫ﺍﻟﺴﻴﺮﻓﺮ‬‫ﻭﻫﻲ‬‫ﺗﺤﺘﻮﻱ‬‫ﻋﻠﻰ‬‫ﻗﻴﻢ‬‫ﻣﺨﺘﻠﻔﺔ‬‫ﻣﺜﻞ‬‫ﻭﻣﺘﻌﺪﺩﺓ‬‫ﻣﺜﻞ‬3‫ﻭ‬4‫ﻭ‬5.
(3Local‫ﻭﺗﻘﻮﻡ‬‫ﻫﺬﻩ‬‫ﺍﻟﻤﺰﻳﺔ‬‫ﻋﻠﻰ‬‫ﺃﺧﺬ‬‫ﺍﻹﺳﻢ‬‫ﺍﻷﺻﻠﻲ‬Source Name،‫ﻟﻠﺨﻂ‬‫ﻭﻣﻦ‬
‫ﺛﻢ‬‫ﻗﺤﺺ‬‫ﺟﻬﺎﺯ‬‫ﺍﻟﻤﺴﺘﺨﺪﻡ‬‫ﻫﻞ‬‫ﻳﻤﺘﻠﻚ‬‫ﻫﺬﺍ‬‫ﺍﻟﺨﻂ‬‫ﺃﻡ‬‫ﻻ‬_^*.
(4‫ﺇﺫﺍ‬‫ﻟﻢ‬‫ﻳﻜﻦ‬‫ﻣﻮﺟﻮﺩﺍ‬‫ﺍﻟﺨﻂ‬‫ﻟﺪﻯ‬‫ﺍﻟﻤﺴﺘﺨﺪﻡ‬‫ﻳﺄﺗﻲ‬‫ﺩﻭﺭ‬‫ﺍﻝ‬url‫ﻟﻴﻘﻮﻡ‬‫ﺑﺘﺤﻤﻴﻞ‬
‫ﺍﻟﺨﻂ‬‫ﻋﻠﻰ‬‫ﺍﻟﻤﺘﺼﻔﺢ‬‫ﻣﻦ‬‫ﺧﻼﻝ‬‫ﺍﻝ‬server)‫ﺃﻱ‬‫ﻫﻨﺎ‬‫ﻳﺘﻢ‬‫ﻭﺿﻊ‬‫ﻣﻜﺎﻥ‬‫ﻭﺟﻮﺩ‬
‫ﺍﻟﺨﻂ‬‫ﻋﻠﻰ‬‫ﺍﻟﺴﻴﺮﻓﺮ‬(.
(5Foramt:‫ﻭﻫﻨﺎ‬‫ﻳﺘﻢ‬‫ﺗﺤﺪﻳﺪ‬‫ﺍﻝ‬format‫ﺍﻟﺨﺎﺹ‬‫ﺑﺎﻟﺨﻂ‬...‫ﻭﻫﻨﺎﻙ‬‫ﺍﻟﻌﺪﻳﺪ‬‫ﻣﻦ‬‫ﺍﻝ‬
formats‫ﻣﺜﻞ‬‫ﺍﻝ‬open type‫ﻭﺍﻝ‬svg‫ﻭﻏﻴﺮﻫﺎ‬...
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

55. Web Fonts
‫ﻟﻨﺸﺎﻫﺪ‬‫ﻣﺜﺎﻻ‬‫ﻋﻠﻰ‬‫ﻣﺎ‬‫ﺫﻛﺮﻧﺎ‬‫ﺳﺎﺑﻘﺎ‬^_^
‫ﻣﻼﺣﻈﺎﺕ‬:
(1‫ﻳﻤﻜﻨﻚ‬‫ﺍﻟﺒﺤﺚ‬‫ﻭﺍﺳﺘﺨﺪﺍﻡ‬‫ﺍﻟﺨﻄﻮﻁ‬‫ﻋﻦ‬‫ﻁﺮﻳﻖ‬google font..‫ﺳﺘﺠﺪ‬‫ﺍﻟﻌﺪﻳﺪ‬‫ﻣﻦ‬
‫ﺍﻟﺨﻄﻮﻁ‬‫ﻭﺑﺈﻣﻜﺎﻧﻚ‬‫ﺗﻀﻤﻴﻨﻬﺎ‬‫ﻭﺍﺳﺘﺨﺪﺍﻣﻬﺎ‬‫ﺑﻜﻞ‬‫ﺳﻬﻮﻟﺔ‬.
(2‫ﺍﺫﺍ‬‫ﺃﺭﺩﺕ‬‫ﺗﺤﻤﻴﻞ‬‫ﺍﻟﺨﻂ‬..‫ﻓﻴﻤﻜﻨﻚ‬،‫ﺫﻟﻚ‬‫ﻭﻫﺬﺍ‬‫ﻋﻦ‬‫ﻁﺮﻳﻖ‬‫ﻧﻔﺲ‬‫ﺍﻟﻤﻮﻗﻊ‬‫ﺃﻭ‬‫ﺃﻱ‬
‫ﻣﻮﻗﻊ‬‫ﺁﺧﺮ‬)‫ﺍﻧﺘﺒﻪ‬‫ﻟﺤﻘﻮﻕ‬‫ﺍﻟﻤﻠﻜﻴﺔ‬(.
(3‫ﺻﻴﻐﺔ‬‫ﺍﻟﺨﻂ‬‫ﺍﻹﻓﺘﺮﺍﺿﻴﺔ‬‫ﻋﺎﺩﺓ‬‫ﺗﻜﻮﻥ‬ttf‫ﻭﻧﺤﻦ‬‫ﻧﻘﻮﻡ‬‫ﺑﺘﺤﻮﻳﻞ‬‫ﻫﺬﻩ‬‫ﺍﻟﺼﻴﻐﺔ‬
‫ﺍﻟﻰ‬webfont‫ﻭﺫﻟﻚ‬‫ﻋﻦ‬‫ﻁﺮﻳﻖ‬‫ﻣﻮﺍﻗﻊ‬‫ﺍﻹﻧﺘﺮﻧﺖ‬..‫ﻗﻢ‬‫ﺑﺎﻟﺒﺤﺚ‬‫ﻋﻦ‬‫ﻁﺮﻳﻖ‬
‫ﺟﻮﺟﻞ‬‫ﻋﻦ‬font to webfont_^*
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

56. Web Fonts
‫ﻁﺒﻌﺎ‬‫ﺍﻟﻰ‬،‫ﺍﻵﻥ‬‫ﻟﻢ‬‫ﺃﻗﻢ‬‫ﺑﺘﻨﻔﻴﺬ‬‫ﺃﻱ‬‫ﻣﺜﺎﻝ‬‫ﻭﺭﺑﻂ‬،‫ﻧﺘﺎﺋﺠﻪ‬‫ﻭﺫﻟﻚ‬‫ﺣﺘﻰ‬‫ﻳﺘﺴﻨﻰ‬‫ﻟﻚ‬‫ﻓﻬﻢ‬
‫ﺟﺰﺋﻴﺎﺕ‬‫ﻫﺬﻩ‬‫ﺍﻟﺨﺎﺻﻴﺔ‬..‫ﺃﻣﺎ‬‫ﺍﻟﺸﻴﻔﺮﺓ‬‫ﺍﻟﻨﻬﺎﺋﻴﺔ‬..‫ﻓﺴﺘﻜﻮﻥ‬‫ﺑﺎﻟﻨﺴﺒﺔ‬‫ﻟﻨﺎ‬‫ﻋﻨﺪ‬
‫ﺍﻟﻌﻤﻞ‬‫ﻣﺠﺮﺩ‬‫ﻧﺴﺦ‬‫ﻭﻟﺼﻖ‬^_^..‫ﻟﻜﻦ‬‫ﺃﺭﺩﻳﻚ‬‫ﺃﻥ‬‫ﺗﺪﺭﻙ‬‫ﻣﺎ‬‫ﻫﻮ‬‫ﺍﻟﺸﻲء‬‫ﺍﻟﺬﻱ‬
‫ﺗﻘﻮﻡ‬‫ﺑﻨﺴﺨﻪ‬‫ﻭﻟﺼﻘﻪ‬..‫ﻟﺬﻟﻚ‬‫ﺩﻋﻨﺎ‬‫ﻧﻜﻤﻞ‬‫ﺑﺎﻟﺘﺪﺭﻳﺞ‬‫ﺣﺘﻰ‬‫ﻧﺼﻞ‬‫ﺍﻟﻰ‬‫ﺍﻟﺼﻴﻐﺔ‬
‫ﺍﻟﺘﻲ‬‫ﺳﻨﻌﻤﻞ‬‫ﻋﻠﻴﻬﺎ‬)‫ﻓﻲ‬‫ﺍﻟﻌﺎﺩﺓ‬‫ﺳﻨﺄﺧﺬﻫﺎ‬‫ﻣﻦ‬‫ﻣﻮﻗﻊ‬‫ﺗﺤﻮﻳﻞ‬‫ﺍﻟﺨﻄﻮﻁ‬‫ﺟﺎﻫﺰﺓ‬
-_-(
‫ﺍﻵﻥ‬‫ﺳﺄﺗﺤﺪﺙ‬‫ﻋﻦ‬‫ﻧﻘﻄﺔ‬‫ﻣﻬﻤﺔ‬‫ﻋﻤﺎ‬‫ﺫﻛﺮ‬‫ﺳﺎﺑﻘﺎ‬‫ﻭﻫﻮ‬Defining Different Faces
‫ﻭﻟﺘﻌﺮﻑ‬‫ﻋﻦ‬‫ﻣﺎﺫﺍ‬‫ﺃﺗﻜﻠﻢ‬..‫ﺃﺭﻳﺪﻙ‬‫ﺃﻥ‬‫ﺗﻘﻮﻡ‬‫ﺑﺘﺤﻤﻴﻞ‬‫ﻫﺬﺍ‬‫ﺍﻟﻤﻠﻒ‬‫ﺃﻭﻻ‬_^*
Open+Sans:use/Collection:com/fonts#UsePlace.google.//www:http‫ﺃﺩﺧﻞ‬‫ﺍﻟﻰ‬‫ﻫﺬﺍ‬
‫ﺍﻟﻤﻮﻗﻊ‬..)google font(‫ﻭﻗﻢ‬‫ﺑﺘﺤﻤﻴﻞ‬‫ﺍﻟﺨﻂ‬^_^)‫ﺷﺎﻫﺪ‬‫ﺍﻟﺼﻮﺭﺓ‬‫ﻓﻲ‬‫ﺍﻟﺸﺮﻳﺤﺔ‬
‫ﺍﻟﺘﺎﻟﻴﺔ‬(
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

57. Web Fonts
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

58. Web Fonts
‫ﺍﻵﻥ‬..‫ﺑﻌﺪ‬‫ﺍﻟﻘﻴﺎﻡ‬‫ﺑﺘﺤﻤﻴﻞ‬‫ﺍﻟﺨﻂ‬..‫ﺳﺘﺠﺪ‬‫ﻫﺬﻩ‬‫ﺍﻟﻤﻠﻔﺎﺕ‬:
‫ﺇﺫﺍ‬‫ﻗﻤﺖ‬‫ﺑﺈﻣﻌﺎﻥ‬‫ﺍﻟﻨﻈﺮ‬‫ﻗﻠﻴﻼ‬..‫ﻓﺴﺘﺠﺪ‬‫ﺃﻥ‬‫ﻫﺬﻩ‬‫ﺍﻟﻤﻠﻔﺎﺕ‬‫ﺑﺄﺳﻤﺎﺋﻬﺎ‬‫ﻛﺄﻧﻬﺎ‬‫ﺗﻤﺜﻞ‬
font-weight^_^...‫ﻧﻌﻢ‬‫ﻭﻫﺬﺍ‬‫ﺍﻟﻤﻘﺼﺪ‬..‫ﺍﺫﺍ‬‫ﻣﺎ‬‫ﻫﻲ‬‫ﺍﻟﻤﺸﻜﻠﺔ‬‫ﺍﻟﺘﻲ‬‫ﻗﺪ‬‫ﺗﻈﻬﺮ‬‫ﻫﻨﺎ‬‫؟؟‬
‫ﻫﻮ‬‫ﺃﻧﻨﻲ‬‫ﻟﻜﻲ‬‫ﺃﺣﺼﻞ‬‫ﻋﻠﻰ‬‫ﻗﻴﻢ‬‫ﻣﺘﻨﻮﻋﺔ‬
،‫ﻟﻠﺨﻂ‬‫ﻓﺈﻧﻪ‬‫ﻳﺠﺐ‬‫ﺃﻥ‬‫ﺃﻗﻮﻡ‬‫ﺑﺘﺤﻮﻳﻞ‬‫ﺟﻤﻴﻊ‬
‫ﺍﻟﺨﻄﻮﻁ‬...‫ﺍﻟﻰ‬webfont‫ﻭﻣﻦ‬‫ﺛﻢ‬‫ﺍﺳﺘﺨﺪﺍﻡ‬
‫ﺍﻝ‬font-face‫ﻟﻜﻞ‬‫ﻗﻴﻤﺔ‬‫ﻭﻛﺄﻧﻬﺎ‬‫ﺧﻂ‬‫ﻋﻠﻰ‬،‫ﺣﺪﻯ‬
‫ﻭﺳﺄﻗﻮﻡ‬‫ﺑﺘﻌﺮﻳﻒ‬‫ﺍﺳﻢ‬‫ﻟﻜﻞ‬‫ﻗﻴﻤﺔ‬‫ﻣﺜﻞ‬
Font-family: open1‫ﻭ‬open2‫ﻭ‬open3‫ﻭﻫﻜﺬﺍ‬
‫ﻭﻫﺬﻩ‬‫ﺍﻟﻄﺮﻳﻘﺔ‬‫ﺻﺤﻴﺤﺔ‬..‫ﻟﻜﻨﻬﺎ‬‫ﻣﺘﻌﺒﺔ‬..
‫ﺑﺎﻹﺿﺎﻓﺔ‬‫ﺍﻟﻰ‬،‫ﺫﻟﻚ‬‫ﻓﻴﻠﺰﻣﻨﻲ‬‫ﺗﺤﺪﻳﺪ‬‫ﻫﺬﻩ‬‫ﺍﻟﻘﻴﻢ‬
‫ﻋﻨﺪ‬‫ﺗﻌﺮﻳﻒ‬‫ﺍﻟﺨﻂ‬..‫ﻟﺬﻟﻚ‬‫ﻅﻬﺮ‬‫ﻣﻔﻬﻮﻡ‬‫ﺍﻝ‬
DefiningDifferent Faces
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

59. Web Fonts
‫ﻭﺍﻵﻥ‬!_!..‫ﺍﻷﻣﻮﺭ‬‫ﻣﺎ‬‫ﺯﺍﻟﺖ‬‫ﻏﺎﻣﻀﺔ‬..‫ﻧﻌﻢ‬..‫ﻟﻜﻦ‬‫ﻟﻨﺸﺎﻫﺪ‬‫ﻣﺜﺎﻻ‬‫ﻟﻜﻲ‬‫ﻧﻮﺿﺢ‬‫ﺍﻟﺸﻜﻞ‬
‫ﺍﻟﺬﻱ‬‫ﻭﺻﻠﻨﺎ‬‫ﺍﻟﻴﻪ‬^_^
‫ﺍﻧﺘﺒﻪ‬‫ﻟﻜﻞ‬‫ﺟﺰﺋﻴﺔ‬‫ﻣﺘﻮﻓﺮﺓ‬‫ﻓﻲ‬‫ﺍﻟﺼﻮﺭﺓ‬..
‫ﻻﺣﻆ‬‫ﺃﻧﻨﻲ‬‫ﻗﻤﺖ‬‫ﺑﺘﺴﻤﻴﺔ‬‫ﺍﻟﺨﻂ‬‫ﺗﺴﻤﻴﺔ‬‫ﻣﺘﺸﺎﺑﻪ‬‫ﻟﻜﻞ‬‫ﻣﻦ‬‫ﺍﻟﺘﻤﻀﻤﻴﻨﺎﺕ‬..‫ﻟﻜﻦ‬‫ﺍﻷﻭﻝ‬
‫ﺍﻟﻬﺪﻑ‬‫ﻣﻨﻪ‬‫ﻫﻮ‬‫ﺗﻀﻤﻴﻦ‬‫ﻗﻴﻤﺔ‬‫ﺍﻝ‬bold‫ﻭﺍﻟﺜﺎﻧﻲ‬‫ﺗﻀﻤﻴﻦ‬‫ﻗﻴﻤﺔ‬‫ﺍﻝ‬italic..‫ﻟﺬﻟﻚ‬
‫ﺍﺳﺘﺨﺪﻣﻨﺎ‬‫ﺍﻝ‬font-weight‫ﻭﺍﻝ‬font-style..‫ﺃﻣﺎ‬‫ﺍﻝ‬url‫ﻓﻜﺎﻥ‬‫ﻳﺄﺧﺬﻧﻲ‬‫ﻟﻤﻮﻗﻊ‬‫ﺍﻟﻤﻠﻒ‬
‫ﺍﻟﺨﺎﺹ‬‫ﺑﻜﻞ‬‫ﻗﻴﻤﺔ‬_^*
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

60. Web Fonts
‫ﺍﻵﻥ‬‫ﺍﻟﺠﻤﻴﻞ‬‫ﻓﻲ‬،‫ﺍﻟﻤﻮﺿﻮﻉ‬‫ﻫﻮ‬‫ﺃﻧﻚ‬‫ﺑﻤﺠﺮﺩ‬‫ﺍﺳﺘﺨﺪﺍﻡ‬‫ﻧﻔﺲ‬‫ﺍﻹﺳﻢ‬‫ﻭﺑﺈﻋﻄﺎﺋﻪ‬‫ﻗﻴﻢ‬
‫ﻣﺘﻨﻮﻋﺔ‬..‫ﻛﻞ‬‫ﻣﺎ‬‫ﻋﻠﻴﻚ‬‫ﺍﻟﻘﻴﺎﻡ‬‫ﺑﻪ‬‫ﻫﻮ‬‫ﺍﻟﻌﻤﻞ‬‫ﺑﺎﻟﻄﺮﻳﻘﺔ‬‫ﺍﻟﺘﻘﻠﻴﺪﻳﺔ‬..‫ﺷﺎﻫﺪ‬‫ﺍﻟﻤﺜﺎﻝ‬:
‫ﻫﻞ‬‫ﻓﻬﻤﺖ‬‫ﻣﺎ‬‫ﺃﺭﻣﻲ‬‫ﺍﻟﻴﻪ‬..‫ﻳﻤﻜﻨﻨﻲ‬‫ﺍﺳﺘﺨﺪﺍﻡ‬‫ﺍﻟﺨﺼﺎﺋﺺ‬‫ﺃﻭ‬‫ﻋﺪﻡ‬‫ﺍﺳﺘﺨﺪﺍﻣﻬﺎ‬
..‫ﻭﻋﻦ‬‫ﻁﺮﻳﻖ‬‫ﺍﻹﺳﻢ‬‫ﻭﺍﻟﻘﻴﻢ‬‫ﺳﻴﺤﺪﺩ‬‫ﺍﻟﺨﻂ‬/‫ﺍﻟﺨﻄﻮﻁ‬‫ﺍﻟﺘﻲ‬‫ﺳﻴﺘﻢ‬‫ﺟﻠﺒﻬﺎ‬‫ﺃﻭ‬‫ﺗﻨﻔﻴﺬ‬
‫ﺗﻨﺴﻴﻘﻬﺎ‬^_^
‫ﻭﺍﻵﻥ‬..‫ﻣﺎﺫﺍ‬_^*..‫ﺍﻵﻥ‬‫ﻟﻨﻌﻮﺩ‬‫ﻟﻨﻠﻘﻲ‬‫ﻧﻈﺮﺓ‬‫ﺑﺴﻴﻄﺔ‬‫ﻋﻦ‬‫ﻧﻘﻄﺔ‬‫ﺷﺮﺣﻨﺎﻫﺎ‬‫ﺳﺎﺑﻘﺎ‬..
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

61. Web Fonts
‫ﻟﻘﺪ‬‫ﺗﺤﺪﺛﻨﺎ‬‫ﻋﻦ‬‫ﺍﻝ‬local‫ﻓﻲ‬‫ﺍﻟﺸﺮﺍﺋﺢ‬،‫ﺍﻟﺴﺎﺑﻘﺔ‬‫ﻭﻗﻠﻨﺎ‬‫ﺃﻧﻬﺎ‬‫ﺗﻔﺤﺺ‬‫ﻫﻞ‬‫ﻳﺘﻮﻓﺮ‬‫ﺍﻟﺨﻂ‬
‫ﺑﺠﻬﺎﺯ‬‫ﺍﻟﻌﻤﻴﻞ‬‫ﺃﻡ‬‫ﻻ‬..‫ﻟﻜﻦ‬‫ﻫﺬﻩ‬‫ﺍﻟﺨﺎﺻﻴﺔ‬‫ﻟﻬﺎ‬‫ﺳﻴﺌﺎﺕ‬‫ﻋﺪﺓ‬‫ﻧﺬﻛﺮ‬‫ﻣﻨﻬﺎ‬:
(1‫ﻫﺬﻩ‬‫ﺍﻟﻤﺰﻳﺔ‬‫ﻻ‬‫ﺗﺪﻋﻢ‬‫ﺃﻱ‬‫ﻣﻦ‬‫ﺇﺻﺪﺍﺭﺍﺕ‬‫ﺍﻝ‬IE‫ﺍﻷﻗﻞ‬‫ﻣﻦ‬9-_-
(2‫ﺗﺄﺧﺬ‬‫ﻭﻗﺖ‬،‫ﺑﺎﻟﺘﻨﻔﻴﺬ‬‫ﻭﺧﺼﻮﺻﺎ‬‫ﻟﻤﺘﺼﻔﺢ‬‫ﺍﻝ‬safari‫ﻋﻠﻰ‬mac os..‫ﻭﺍﻟﺴﺒﺐ‬
‫ﻓﻲ‬‫ﺫﻟﻚ‬‫ﻳﻌﻮﺩ‬‫ﺍﻟﻰ‬‫ﺃﻥ‬‫ﺍﻝ‬mac‫ﻳﺠﺐ‬‫ﺃﻥ‬postScript name‫ﺑﻴﻨﻤﺎ‬‫ﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬
‫ﺍﻷﺧﺮﻯ‬‫ﺗﺄﺧﺬ‬‫ﺍﻝ‬Full name..‫ﻫﺬﺍ‬‫ﺍﻟﻜﻼﻡ‬‫ﻣﺎﺫﺍ‬‫ﻳﻌﻨﻲ‬‫؟‬!‫ﻫﺬﺍ‬‫ﻳﻌﻨﻲ‬‫ﺃﻧﻪ‬‫ﻳﺠﺐ‬
‫ﺃﻥ‬‫ﻧﻘﻮﻡ‬‫ﺑﺘﻌﺮﻳﻒ‬local‫ﻣﺮﺗﻴﻦ‬..-_-..‫ﻭﻫﺬﻩ‬‫ﺍﻟﻤﺸﻜﻠﺔ‬‫ﺛﺎﻧﻴﺔ‬..‫ﻣﺜﺎﻝ‬:
‫ﻭﻫﻨﺎﻙ‬‫ﻏﻴﺮﻫﺎ‬‫ﺃﻳﻀﺎ‬..‫ﻟﻜﻦ‬‫ﻧﻜﺘﻔﻲ‬‫ﺑﻬﺬﺍ‬.._^*
‫ﻭﺍﻵﻥ‬‫ﻣﺎﺫﺍ‬‫ﻧﻔﻌﻞ‬‫؟‬
‫ﺑﻜﻞ‬‫ﺑﺴﺎﻁﺔ‬‫ﻓﺈﻧﻨﺎ‬‫ﻻ‬‫ﻧﺴﺘﺨﺪﻡ‬‫ﺍﻝ‬localً‫ﺓ‬‫ﻋﺎﺩ‬^_^
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

62. aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(
‫ﺍﻟﻘﻠﻢ‬ ‫ﻭﺣﻲ‬ ‫ﻛﺘﺎﺏ‬)‫ﺍﻷﻭﻝ‬ ‫ﺍﻟﺠﺰء‬(

63. Web Fonts
‫ﺑﻌﺪ‬‫ﺣﺪﻳﺜﻨﺎ‬‫ﺍﻟﺸﻴﻖ‬‫ﻋﻦ‬‫ﻣﻮﺿﻮﻉ‬‫ﺍﻝ‬local_^*..‫ﻳﺠﺐ‬‫ﺃﻥ‬‫ﻧﻨﺘﻘﻞ‬‫ﺍﻟﻰ‬‫ﺟﺰﺋﻴﺔ‬
‫ﺃﺧﺮﻯ‬،‫ﻣﻬﻤﺔ‬‫ﻭﻫﻲ‬‫ﺍﻹﻣﺘﺪﺍﺩﺍﺕ‬‫ﺍﻟﺨﺎﺻﺔ‬‫ﺑﻜﻞ‬‫ﺧﻂ‬‫؟‬!،،‫ﻧﻌﻢ‬‫ﻓﻼ‬،‫ﺗﺘﻌﺠﺐ‬‫ﻓﻼ‬
‫ﻳﻮﺟﺪ‬‫ﺗﻢ‬‫ﺗﺼﻤﻴﻤﻪ‬‫ﻭﺇﺿﺎﻓﺘﻪ‬‫ﻋﺸﺎﻭﺋﻴﺎ‬‫ﺑﺪﻭﻥ‬‫ﻫﺪﻑ‬_^*
‫ﻭﺍﻵﻥ‬‫ﻟﻨﺒﺪﺃ‬:
(1WOFF / WOFF2:‫ﻫﺬﺍ‬‫ﺍﻝ‬format‫ﺍﺧﺘﺼﺎﺭ‬‫ﻝ‬Web Open Form Format،‫ﺗﻢ‬
‫ﺗﺼﻤﻴﻢ‬‫ﻫﺬﺍ‬‫ﺍﻟﻨﻮﻉ‬‫ﻣﻦ‬‫ﻗﺒﻞ‬Mozila^_^،‫ﺑﺎﻟﺘﻌﺎﻭﻥ‬‫ﻣﻊ‬‫ﻣﻊ‬‫ﻣﻨﻈﻤﺎﺕ‬‫ﺃﺧﺮﻯ‬
_^*،‫ﻭﻳﻌﺪ‬‫ﻫﺬﺍ‬‫ﺍﻟﻨﻮﻉ‬‫ﻣﻦ‬‫ﺃﺳﺮﻉ‬‫ﺍﻷﻧﻮﺍﻉ‬‫ﻓﻲ‬،‫ﺍﻟﺘﺤﻤﻴﻞ‬‫ﻭﺍﻟﺴﺒﺐ‬‫ﻓﻲ‬‫ﺫﻟﻚ‬
‫ﻳﻌﻮﺩ‬‫ﺍﻟﻰ‬‫ﺃﻥ‬‫ﻫﺬﺍ‬‫ﺍﻟﻨﻮﻉ‬‫ﻫﻮ‬‫ﻣﻠﻒ‬‫ﻣﻀﻐﻮﻁ‬‫ﻳﺠﻤﻊ‬‫ﺑﻴﻦ‬‫ﻧﻮﻋﻴﻦ‬‫ﻭﻫﻤﺎ‬TTF
‫ﻭﺍﻝ‬OTF..،‫ﺃﻳﻀﺎ‬‫ﻣﻤﺎ‬‫ﻳﻤﻴﺰ‬‫ﻫﺬﺍ‬‫ﺍﻟﻨﻮﻉ‬‫ﻫﻮ‬‫ﺇﻣﻜﺎﻧﻴﺔ‬‫ﺍﺿﺎﻓﺔ‬meta data‫ﻭ‬
lincies‫ﺩﺍﺧﻞ‬‫ﻧﻔﺲ‬‫ﺍﻝ‬font-_-...‫ﻭﻫﺬﺍ‬‫ﺍﻟﻨﻮﻉ‬‫ﻫﻮ‬‫ﺍﻟﻲ‬‫ﺗﺴﻴﺮ‬‫ﺍﻟﺸﺮﻛﺎﺕ‬
‫ﻟﺠﻌﻠﻪ‬‫ﻣﺪﻋﻮﻣﺎ‬‫ﻓﻲ‬‫ﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬...
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

64. Web Fonts
(2OTF / TTF:‫ﻫﺬﺍﻥ‬‫ﻧﻮﻋﺎﻥ‬‫ﻣﻦ‬‫ﺍﻹﻣﺘﺪﺍﺩ‬‫ﻭﻫﻤﺎ‬‫ﺍﺧﺘﺼﺎﺭ‬‫ﻝ‬OpenType Font and
TrueType Font.،‫ﻫﺬﺍﻥ‬‫ﺍﻟﻨﻮﻋﺎﻥ‬‫ﻫﻤﺎ‬‫ﺍﻟﻨﻮﻋﺎﻥ‬،‫ﺍﻟﺸﺎﺋﻌﺎﻥ‬‫ﻭﺑﺴﺒﺒﻬﻤﺎ‬‫ﺗﻢ‬‫ﺗﺼﻤﻴﻢ‬
‫ﺍﻟﻨﻮﻉ‬‫ﺍﻟﺴﺎﺑﻖ‬)WOFF(،‫ﻭﺍﻟﺴﺒﺐ‬‫ﻓﻲ‬‫ﺫﻟﻚ‬‫ﻳﻌﻮﺩ‬‫ﺍﻟﻰ‬‫ﺳﻬﻮﻟﺔ‬‫ﻧﺴﺦ‬‫ﻫﺬﻩ‬
‫ﺍﻷﻧﻮﺍﻉ‬‫ﻭﺍﺳﺘﺨﺪﺍﻣﻬﺎ‬‫ﺑﺸﻜﻞ‬‫ﻏﻴﺮ‬‫ﻗﺎﻧﻮﻧﻲ‬*_*،‫ﺑﻤﺎ‬‫ﻳﺘﻤﻴﺰ‬‫ﺑﻪ‬‫ﻧﻮﻉ‬‫ﺍﻝ‬open
type‫ﻫﻮ‬‫ﺩﻋﻤﻪ‬‫ﻟﺠﻤﻴﻊ‬‫ﺍﻷﻧﻈﻤﺔ‬cross-platform،‫ﺃﻣﺎ‬‫ﺑﺨﺼﻮﺹ‬‫ﺍﻝ‬ttf‫ﻓﻬﻮ‬‫ﻧﻮﻉ‬
‫ﺻﻤﻢ‬‫ﺑﻮﺳﺎﻁﺔ‬apple & Microsoft‫ﻓﻲ‬‫ﺁﻭﺍﺧﺮ‬‫ﺍﻟﺜﻤﺎﻧﻴﺎﺕ‬..‫ﻭﻛﺎﻥ‬‫ﻣﺎ‬‫ﻳﻤﻴﺰﻩ‬‫ﻫﻮ‬
‫ﺍﻟﺘﺤﻜﻢ‬‫ﺑﻄﺮﻳﻘﺔ‬‫ﻋﺮﺽ‬‫ﺍﻟﺨﻂ‬‫ﺑﻨﺎﺋﺎ‬‫ﻋﻠﻰ‬‫ﺍﻟﺒﻜﺴﻞ‬_^*...‫ﻭﻟﺬﻟﻚ‬‫ﺗﺠﺪ‬‫ﺃﻥ‬
‫ﺃﻏﻠﺐ‬‫ﺍﻟﺨﻄﻮﻁ‬‫ﺍﻟﺘﻲ‬‫ﻧﻘﻮﻡ‬‫ﺑﺘﺤﻮﻳﻠﻬﺎ‬‫ﻳﻜﻮﻥ‬‫ﻣﻦ‬ttf،‫ﻭﻫﺬﺍ‬‫ﻻ‬‫ﻳﻌﻨﻲ‬‫ﺃﻥ‬‫ﺍﻷﻧﻮﺍﻉ‬
‫ﺍﻷﺧﺮﻯ‬‫ﻻ‬‫ﺗﻤﻠﻚ‬‫ﻫﺬﻩ‬‫ﺍﻟﻤﺰﻳﺔ‬...‫ﻓﺎﻟﺨﺎﺻﻴﺔ‬‫ﺍﻟﺴﺎﺑﻘﺔ‬‫ﺟﻤﻌﺖ‬‫ﺑﻴﻦ‬‫ﻫﺬﺍ‬‫ﺍﻟﻨﻮﻋﻴﻦ‬
‫ﻓﻲ‬‫ﻧﻮﻉ‬‫ﻭﺍﺣﺪ‬..‫ﻫﻮ‬‫ﺍﻟﺘﻘﺪﻡ‬‫ﺍﻟﺘﻘﻨﻲ‬^_^...‫ﺑﻬﺬﺍ‬‫ﻧﻜﻮﻥ‬‫ﺫﻛﺮﻧﺎ‬‫ﻓﻜﺮﺓ‬‫ﻛﻞ‬‫ﺍﻣﺘﺪﺍﺩ‬
‫ﻣﻦ‬‫ﻫﺬﻩ‬‫ﻣﻦ‬‫ﻧﺒﺬﺓ‬‫ﺻﻐﻴﺮﺓ‬^_^..
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

65. Web Fonts
(3EOT:‫ﻫﺬ‬‫ﺍﻟﻨﻮﻉ‬‫ﻫﻮ‬‫ﺍﺧﺘﺼﺎﺭ‬‫ﻝ‬Embedded Open Type‫ﻭﺻﻤﻢ‬‫ﻋﻦ‬‫ﻁﺮﻳﻖ‬
،‫ﻣﺎﻳﻜﺮﻭﺳﻔﺖ‬‫ﻭﻳﻌﺘﺒﺮﻭ‬‫ﻫﻢ‬‫ﺍﻟﻤﺒﺘﺮﻛﻴﻴﻦ‬‫ﺍﻷﺻﻠﻴﻴﻦ‬‫ﻟﻤﻮﺿﻮﻉ‬‫ﺍﻝ‬font-face،
‫ﻭﻫﺬﺍ‬‫ﺍﻟﻨﻮﻉ‬‫ﻫﻮ‬‫ﺍﻟﻮﺣﻴﺪ‬‫ﺍﻟﺬﻱ‬‫ﻳﺪﻋﻤﻪ‬‫ﻣﺘﺼﻔﺤﺎﺕ‬‫ﺍﻝ‬IE8‫ﻭﺃﻗﻞ‬..‫ﻟﺬﻟﻚ‬‫ﺗﺠﺪ‬
‫ﺃﻧﻨﺎ‬‫ﺳﻨﺴﺘﺨﺪﻡ‬‫ﺍﻝ‬EOT‫ﻋﻨﺪ‬‫ﺗﻀﻤﻴﻦ‬‫ﺍﻟﺨﻄﻮﻁ‬..)‫ﺳﻨﺮﻯ‬‫ﺍﻟﺼﻴﻐﺔ‬‫ﺍﻟﻘﻴﺎﺳﻴﺔ‬
‫ﺑﻌﺪ‬‫ﺍﻹﻧﺘﻬﺎء‬‫ﻣﻦ‬‫ﺍﻟﻨﻘﻄﺔ‬4‫ﻭﺍﻷﺧﻴﺮﺓ‬‫ﺑﺈﺫﻥ‬‫ﷲ‬‫ﺗﻌﺎﻟﻰ‬(.
(4SVG / SVGZ:‫ﻫﺬﺍ‬‫ﺍﻟﻨﻮﻉ‬‫ﻫﻮ‬‫ﺍﺧﺘﺼﺎﺭ‬‫ﻝ‬Scalable Vector Graphics‫ﻭﻫﻮ‬‫ﻳﻌﺘﻤﺪ‬
‫ﻋﻠﻰ‬‫ﺍﻝ‬vector‫ﻟﺮﺳﻢ‬‫ﺃﻭ‬‫ﺗﻤﺜﻴﻞ‬،‫ﺍﻟﺨﻂ‬‫ﻛﻤﺎ‬‫ﺃﻥ‬‫ﻫﺬﺍ‬‫ﺍﻟﻨﻮﻉ‬‫ﻳﺘﻤﻴﺰ‬‫ﺑﺎﻟﺤﺠﻢ‬
‫ﺍﻟﺨﻔﻴﻒ‬‫ﻭﻫﺬﺍ‬‫ﻳﻌﻨﻲ‬‫ﺳﻬﻮﻟﺔ‬‫ﺍﻟﺘﺤﻤﻴﻞ‬^_^،‫ﻟﻜﻦ‬‫ﺍﻟﻤﺸﻜﻠﺔ‬‫ﺃﻧﻪ‬‫ﺍﻝ‬IE‫ﻭﺍﻝ‬IE
mobile‫ﻭﺍﻝ‬Firefox‫ﻏﻴﺮ‬‫ﺩﺍﻋﻢ‬،‫ﻟﻪ‬‫ﻭﻳﺴﺘﺨﺪﻡ‬‫ﺍﻟﺼﻴﻐﺔ‬‫ﺍﻷﻭﻟﻰ‬‫ﻟﻬﻢ‬..‫ﺑﺎﻹﺿﺎﻓﺔ‬
‫ﺍﻟﻰ‬‫ﺫﻟﻚ‬‫ﻓﺈﻥ‬‫ﻫﺬﺍ‬‫ﺍﻟﻨﻮﻉ‬‫ﺗﻢ‬‫ﺩﻋﻤﻪ‬‫ﻣﻦ‬‫ﺍﻹﺻﺪﺍﺭ‬4.1‫ﻭﺃﻗﻞ‬..
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

66. Web Fonts
،‫ﻭﺍﻵﻥ‬‫ﺑﻌﺪ‬‫ﺍﻟﺤﺪﻳﺚ‬،‫ﺍﻟﺴﺎﺑﻖ‬‫ﺃﺻﺒﺤﻨﺎ‬‫ﻧﻌﻲ‬‫ﺑﻔﻀﻞ‬‫ﷲ‬،‫ﺗﻌﺎﻟﻰ‬‫ﻣﺎﺫﺍ‬‫ﻧﻌﻨﻲ‬
‫ﺑﻬﺬﻩ‬‫ﺍﻷﻧﻮﺍﻉ‬‫ﻣﻦ‬،‫ﺍﻟﺨﻄﻮﻁ‬‫ﻭﺑﻬﺬﺍ‬‫ﺳﻴﺴﻬﻞ‬‫ﻋﻠﻴﻨﺎ‬‫ﺍﻵﻥ‬‫ﺍﺳﺘﺨﺪﺍﻡ‬‫ﺍﻟﺼﻴﻐﺔ‬‫ﺑﺈﺫﻥ‬‫ﷲ‬
‫ﺗﻌﺎﻟﻰ‬..‫ﻟﻨﺸﺎﻫﺪ‬‫ﻣﻌﺎ‬‫ﻣﺜﺎﻻ‬‫ﻋﻠﻰ‬‫ﻁﺮﻳﻘﺔ‬‫ﺗﻀﻤﻴﻦ‬‫ﺍﻟﺨﻄﻮﻁ‬‫ﺑﺤﻴﺚ‬‫ﺗﻜﻮﻥ‬‫ﻣﺪﻋﻮﻣﺔ‬
‫ﻣﻦ‬‫ﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬‫ﺍﻟﺮﺋﻴﺴﻴﺔ‬‫ﺟﻤﻴﻌﻬﺎ‬^_^:
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

67. Web Fonts
‫ﻣﻼﺣﻈﺔ‬:‫ﺍﻟﺼﻴﻐﺔ‬‫ﺍﻟﺴﺎﺑﻘﺔ‬‫ﺗﺴﻤﻰ‬Fontspring Bulletproof Syntax‫ﻭﻫﻨﺎﻙ‬‫ﺻﻴﻐﺔ‬‫ﺃﺧﺮﻯ‬
‫ﺃﻳﻀﺎ‬‫ﻳﻤﻜﻦ‬‫ﺃﻥ‬‫ﺗﺮﺍﻫﺎ‬‫ﻭﻫﻲ‬‫ﺃﻳﻀﺎ‬‫ﺩﺍﻋﻤﺔ‬‫ﻟﺠﻤﻴﻊ‬‫ﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬‫ﺍﻟﺮﺋﻴﺴﻴﺔ‬‫ﻭﻫﻲ‬
Bulletproof Syntax‫ﻭﻫﻲ‬‫ﺗﺸﺒﻪ‬‫ﻫﺬﺍ‬‫ﺍﻟﻤﺜﺎﻝ‬:
‫ﻫﺬﻩ‬‫ﺍﻟﺼﻴﻐﺔ‬‫ﺷﺒﻴﻪ‬‫ﺑﺎﻟﺼﻴﻐﺔ‬،‫ﺍﻟﺴﺎﺑﻘﺔ‬‫ﻟﻜﻦ‬‫ﻳﻌﺘﻤﺪ‬‫ﺃﻭﻻ‬‫ﻋﻠﻰ‬‫ﺟﻌﻞ‬‫ﻗﻴﻤﺔ‬‫ﺍﻝ‬local‫ﻏﻴﺮ‬‫ﻣﻨﻔﺬﺓ‬
‫ﻣﻦ‬‫ﺍﻷﺟﻬﺰﺓ‬)‫ﺍﻟﺨﻂ‬‫ﻏﻴﺮ‬‫ﻣﻮﺟﻮﺩ‬(‫ﻭﻳﺘﻢ‬‫ﺍﺳﺘﺪﻋﺎﺋﻪ‬‫ﻏﺎﻟﺒﺎ‬‫ﻣﻦ‬‫ﺍﻟﺨﺎﺭﺝ‬external_^*
..‫ﻓﺈﺫﺍ‬‫ﺭﺃﻳﺖ‬‫ﺃﻱ‬‫ﻣﻦ‬‫ﺍﻟﺸﻜﻠﻴﻦ‬..‫ﻓﺎﻟﻮﺿﻊ‬‫ﺗﻤﺎﻡ‬‫ﺇﻥ‬‫ﺷﺎء‬‫ﷲ‬^_^
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

68. Web Fonts
‫ﻭﺍﻵﻥ‬‫ﻟﻨﺸﺎﻫﺪ‬‫ﺍﻟﻤﺘﺼﻔﺤﺎﺕ‬‫ﺍﻟﺘﻲ‬‫ﺗﺪﻋﻢ‬@font-face:)‫ﺍﻟﺼﻮﺭﺓ‬‫ﻣﻦ‬‫ﻣﻮﻗﻊ‬w3schools
‫ﻓﻲ‬‫ﺗﺎﺭﻳﺦ‬9-2-2015(
‫ﻭﺁﺧﺮ‬‫ﺩﻋﻮﺍﻧﺎ‬‫ﺃﻥ‬‫ﺍﻟﺤﻤﺪ‬‫ﻟ‬‫ﺭﺏ‬‫ﺍﻟﻌﺎﻟﻤﻴﻦ‬^_^...‫ﻭﺍﻵﻥ‬‫ﺑﻬﺬﺍ‬‫ﻧﻜﻮﻥ‬‫ﺍﻧﺘﻬﻴﻨﺎ‬‫ﻣﻦ‬
‫ﺍﻟﺨﻄﻮﻁ‬‫ﺑﺈﺫﻥ‬‫ﷲ‬‫ﺗﻌﺎﻟﻰ‬..‫ﻣﻊ‬‫ﻣﻼﺣﻈﺔ‬‫ﺃﻧﻪ‬‫ﻳﻮﺟﺪ‬‫ﺍﻟﻌﺪﻳﺪ‬‫ﻣﻦ‬‫ﺍﻟﺴﻤﺎﺕ‬
‫ﻭﺍﻟﺨﺼﺎﺋﺺ‬‫ﻟﻢ‬‫ﻳﺘﻢ‬‫ﺍﻟﺤﺪﻳﺚ‬‫ﻋﻨﻬﺎ‬‫ﺑﺈﻣﻜﺎﻧﻚ‬‫ﺍﻟﺒﺤﺚ‬‫ﻋﻨﻬﺎ‬..‫ﻗﻢ‬‫ﺑﺎﻟﺒﺤﺚ‬‫ﻋﻦ‬
“More Font Properties”‫ﻋﻠﻰ‬‫ﺳﺒﻴﻞ‬‫ﺍﻟﻤﺜﺎﻝ‬_^*..‫ﻟﻜﻦ‬‫ﻣﺎ‬‫ﻳﻬﻤﻨﻲ‬‫ﻣﺎ‬‫ﺗﻢ‬‫ﺫﻛﺮﻩ‬^_^
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

69. Web Fonts
‫ﻣﻼﺣﻈﺔ‬:‫ﺑﺎﻟﻨﺴﺒﺔ‬‫ﻟﻤﻮﻗﻊ‬‫ﺟﻴﺪ‬‫ﻳﻘﻮﻡ‬‫ﺑﺘﺤﻮﻳﻞ‬‫ﺍﻝ‬font‫ﺍﻟﻰ‬webfont‫ﻣﻮﻗﻊ‬
generator-com/tools/webfont.fontsquirrel.//www:http
‫ﺇﺫﺍ‬‫ﻗﻤﺖ‬‫ﺑﺎﻟﺒﺤﺚ‬‫ﻛﻤﺎ‬‫ﺃﺧﺒﺮﺗﻚ‬‫ﺑﺎﻟﺸﺮﺍﺋﺢ‬‫ﺍﻷﻭﻟﻰ‬‫ﺳﺘﺠﺪﻩ‬‫ﺿﻤﻦ‬‫ﺍﻟﻘﺎﺋﻤﺔ‬‫ﺍﻷﻭﻟﻰ‬‫ﻓﻲ‬
‫ﺑﺤﺚ‬‫ﺟﻮﺟﻞ‬_^*
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(

70. aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(
‫ﻭﺍﻟﺴﻼﻡ‬ ‫ﺍﻟﺼﻼﺓ‬ ‫ﺃﻓﻀﻞ‬ ‫ﻋﻠﻴﻪ‬ ‫ﺍﻟﻤﺼﻄﻔﻰ‬ ‫ﺍﻟﺤﺒﻴﺐ‬ ‫ﻋﻠﻰ‬ ‫ﻭﺳﻠﻢ‬ ‫ﺻﻞ‬ ‫ﺍﻟﻠﻬﻢ‬

71. Text Effects and Typographic Styles
‫ﻫﻞ‬‫ﺗﺤﺐ‬‫ﺍﻟﺤﻠﻮﻯ؟‬
‫ﺇﺫﺍ‬‫ﻛﻨﺖ‬‫ﻣﻦ‬‫ﻣﺤﺒﻴﻦ‬‫ﺍﻟﺤﻠﻮﻯ‬‫ﻓﺘﺎﺑﻊ‬‫ﻣﻌﻨﺎ‬،‫ﺍﻟﻤﺜﺎﻝ‬‫ﻭﺇﻻ‬‫ﻓﻴﺠﺐ‬‫ﻋﻠﻴﻚ‬‫ﺣﺒﻬﺎ‬‫ﺣﺘﻰ‬
‫ﻧﻜﻤﻞ‬‫ﺍﻟﺘﺸﺒﻴﻪ‬‫ﻋﻠﻰ‬‫ﻗﻄﻊ‬‫ﺍﻟﺤﻠﻮﻯ‬‫ﻫﻬﻬﻬﻪ‬..^_^
‫ﺑﺎﻟﻨﺴﺒﺔ‬‫ﻟﻤﻮﺍﻗﻊ‬‫ﺍﻹﻧﺘﺮﻧﺖ‬‫ﺍﻟﻤﺘﻮﺍﺟﺪﺓ‬،‫ﻭﺑﻜﺜﺮﺓ‬‫ﻓﺈﻧﻨﺎ‬‫ﻧﺸﺎﻫﺪ‬‫ﺍﻟﻌﺪﻳﺪ‬‫ﻣﻦ‬‫ﺍﻟﺼﻔﺤﺎﺕ‬
،‫ﺍﻟﻤﺘﻨﻮﻋﺔ‬‫ﻟﻜﻦ‬‫ﺍﻟﺼﻔﺤﺎﺕ‬‫ﺍﻟﻲ‬‫ﺗﺠﺬﺑﻚ‬،‫ﺍﻟﻴﻬﺎ‬‫ﻫﻲ‬‫ﺍﻟﺼﻔﺤﺎﺕ‬‫ﺍﻟﺘﻲ‬‫ﺗﻘﺪﻡ‬‫ﺧﺪﻣﺔ‬‫ﺟﻴﺪﺓ‬
‫ﺑﺄﻓﻀﻞ‬‫ﺃﺳﻠﻮﺏ‬،‫ﺗﺼﻤﻴﻢ‬‫ﻭﺃﻭﺿﺢ‬‫ﻁﺮﻳﻘﺔ‬،‫ﻋﺮﺽ‬‫ﻭﺑﻬﺬﺍ‬‫ﻓﺈﻥ‬‫ﺍﻟﺠﻤﺎﻝ‬‫ﻭﺍﻟﺤﺮﻛﺎﺕ‬
‫ﻭﺍﻟﺘﻨﺴﻴﻘﺎﺕ‬‫ﺍﻟﺮﺍﺋﻌﺔ‬‫ﻟﻠﻤﻮﻗﻊ‬،‫ﻛﻜﻞ‬‫ﻭﻟﻠﻤﺤﺘﻮﻯ‬،‫ﺧﺼﻮﺻﺎ‬‫ﻣﻬﻢ‬،‫ﺟﺪﺍ‬‫ﻭﺗﻌﺘﺒﺮ‬‫ﻫﻲ‬
‫ﺍﻟﺤﻠﻮﻯ‬‫ﺍﻟﺨﺎﺻﺔ‬‫ﺑﺄﻱ‬‫ﻣﺸﺮﻭﻉ‬‫ﻭﺍﻟﻤﻘﺪﻣﺔ‬‫ﻣﻨﻚ‬‫ﻟﻠﺰﺍﺋﺮ‬^_^..
‫ﻭﺑﺎﻟﺘﺄﻛﻴﺪ‬‫ﻫﺬﺍ‬‫ﺍﻷﻣﺮ‬‫ﻳﺘﻌﺪﻯ‬‫ﻗﻄﻊ‬،‫ﺍﻟﺤﻠﻮﻯ‬‫ﺑﻞ‬‫ﻭﻳﺼﻨﻒ‬‫ﻓﻲ‬‫ﻋﺎﻟﻢ‬‫ﺗﺼﻤﻴﻢ‬‫ﺍﻟﻤﻮﺍﻗﻊ‬
‫ﻋﻠﻰ‬‫ﺃﻧﻪ‬‫ﺍﻟﻌﺎﻣﻮﺩ‬‫ﺍﻟﻔﻘﺮﻱ‬‫ﻷﻱ‬‫ﻣﻮﻗﻊ‬‫ﻭﻷﻱ‬‫ﻣﺸﺮﻭﻉ‬...
aneeshikmat@2nees.com ‫ﺣﻤﻴﺪ‬ ‫ﺃﺑﻮ‬ ‫ﺣﻜﻤﺖ‬ ‫ﺃﻧﻴﺲ‬)‫ﻣﺠﺎﻧﻴﺔ‬ ‫ﺩﻭﺭﺓ‬(