بعتذر عن الإنقطاع امبارح، ولكن خليني أفكرك بأول CSS Note كتبناها هنا ع الصفحة، الـImport Rule، ويومها قولتلك ان الـCSS فيها كذا Rule هتستخدمهم كتير في حياتك، والنهاردة خليني أكلمك بقى عن الـRule اللي لا غنى عنها حرفيًا، الـMedia Query!
طيب احنا بنستخدم الـMedia Query ليه؟ ببساطة الأجهزة اللي بتستخدم الانترنت أحجامهاغير ثابتة وأبعادها غير ثابتة، زمان كان الـAspect Ratio (نسبة الطول للعرض) الشائع كان 4:3، ومن سنتين كان 16:9، ولكن حاليًا انت عندك كذا جهاز بيقدر يستخدم الإنترنت وكلهم بأشكال مختلفة وAspect Ratio مختلفة، يعني على سبيل المثال
أغلب الموبايلات من 5 سنين كانت بتيجي بـAspect Ratio الـ9:16، حاليًا في موبايلات بـAspect Ratio مختلف زي 9:18، 9:19.5، 9:21 وأرقام غريبة سعادتك! ده غير بقى شاشات الكمبيوتر اللي بـAspect Ratio مختلف زي الـWide والـUltraWide وهكذا
ومن هنا كان لازم نعمل Styling معين للصفحة لما Aspect Ratio معين يتحقق، وده أكبر استخدام للـMedia Query، ولكنها برضه بتستخدم في حاجات تانية زي الـPrint Styling وليها Rules جميلة إحتمال نتكلم عنها في بوست تاني بإذن الله
طبعًا كون صفحتك داعمة لكذا Aspect Ratio بيخليها Responsive على مختلف الشاشات، وده بيسمح لناس أكتر انها تستمتع بتجربة استخدام صفحتك، وهذا لو تعلمون عظيم.
ده بقى بيتم عن طريق ايه؟ عن طريق الـMedia Queries!
في الصورة أنا مقسملك السطر لـ3 أجزاء، وده بالظبط الـSyntax عشان تكتب الـMedia Query بشكل صحيح، وخليني أشرحلك الـSyntax هنا ببساطة
1- دي بسيطة، بتعبر عن الـMedia Rule نفسها، مفيهاش افتكاسات أو أي حاجة محتاج تكتبها.
2- هنا احنا بنتكلم عن الـMedia Type، ودي بتقول للمتصفح يعمل التغييرات دي على ايه، زي مثلًا الـScreen أو الـPrint في حالة الطباعة، أو الـHandheld وهكذا
3- وهنا الـMedia Feature، وحقيقي دول كتير وهسيبلك لينك في أول كومنت بيتكلم عن الـMedia Query ممكن تراجعه براحتك بقى 😄
الـMedia Queries قد تبدو صعبة في الأول، ولكن صدقني دي من أسهل الحاجات اللي هتتعامل معاها وهتفيدك، في البوست هنا اتكلمت عنها بشكل مختصر شوية، بإذن الله في Notes تانية تخص الـMedia Query هنشرها برضه بإذن الله فـ اتأكد انك عامل Follow عشان مايفوتكش البوست أول ما ينزل
وبس كدة، ده الموضوع ببساطة.
الجينيص
CSS Notes
الجينيص