CSS3 میں اہم تبدیلیاں سمجھیں
CSS2 اور CSS3 کے درمیان سب سے بڑا فرق یہ ہے کہ CSS3 مختلف حصوں میں تقسیم کیا گیا ہے، جو ماڈیولز کہتے ہیں. ان ماڈیول میں سے ہر ایک کو سفارش عمل کے مختلف مراحل میں W3C کے ذریعے اپنا راستہ بنا رہا ہے. اس پروسیسنگ نے مختلف مینوفیکچررز کی طرف سے براؤزر میں CSS3 کے مختلف ٹکڑے ٹکڑے کو قبول کرنے اور لاگو کرنے کے لئے بہت آسان بنا دیا ہے.
اگر آپ اس عمل کا موازنہ کریں کہ CSS2 کے ساتھ کیا ہوا ہے، جہاں سب کچھ ایک ہی دستاویز کے طور پر پیش کیا گیا تھا، اس کے اندر اندر تمام کیجادنگ انداز شیٹس کی معلومات کے ساتھ، آپ کو چھوٹے، انفرادی ٹکڑے ٹکڑے میں سفارش کو توڑنے کے فوائد کو دیکھنے کے لئے شروع ہوتا ہے. کیونکہ ان میں سے ہر ایک ماڈیولز انفرادی طور پر کام کی جا رہی ہیں، ہمارے پاس CSS3 ماڈیولز کے لئے براؤزر کی مدد کی بہت زیادہ حد ہے.
کسی نئی اور تبدیل کرنے والی تفصیلات کے طور پر، آپ کے کر سکتے ہیں کے طور پر بہت سے براؤزر اور آپریٹنگ سسٹم میں اچھی طرح سے آپ کے CSS3 صفحات کو جانچنے کے لئے یقینی بنائیں. یاد رکھیں کہ مقصد ہر ویب براؤزر میں بالکل وہی ہی نظر نہیں آتا، لیکن اس بات کا یقین کرنے کے لئے کہ آپ CSS3 شیلیوں سمیت، کسی بھی شیلیوں کو جو براؤزرز میں ان کی حمایت کرتے ہیں، ان کی مدد کرتے ہیں اور انھیں بڑی عمر کے براؤزروں کے لئے بھروسہ کرنی پڑتی ہے. مت کرو.
نیا CSS3 منتخب کریں
CSS3 نئے طریقوں کا ایک گروپ پیش کرتا ہے جو آپ نئے سی ایس ایس کے انتخاب کے ساتھ ساتھ سی ایس ایس کے قوانین لکھ سکتے ہیں، ساتھ ساتھ ایک نیا مجموعہ، اور کچھ نئی چھاسو عناصر.
تین نئے خاص انتخاب:
- خصوصیت ابتداء میں بالکل عنصر ہے [foo ^ = "bar"] عنصر میں آپ کو "بار" مثال کے طور پر شروع ہونے والی ایک خاصیت کا نام دیا جاتا ہے.
- خصوصیت ختم ہونے والی میچوں میں بالکل عنصر ہے [foo $ = "bar"] عنصر میں ایک خصوصیت ہے جو ایف او کا نام ہے جسے "بار" کے ساتھ ختم ہوتا ہے.
- خصوصیت میچ کے عنصر پر مشتمل ہے [foo * = "bar"] عنصر میں ایک خصوصیت ہے جس میں Foo کہا جاتا ہے جس میں تار "بار" مثال ہے.
16 نئے چھٹو کلاس:
- جڑ
- دستاویز کا جڑ عنصر. ایچ ٹی ایم ایل میں یہ ہمیشہ ہے.
- : نتھ بچے (ن)
- اس سے صحیح بچے عناصر سے ملنے یا متبادل میچوں کو حاصل کرنے کے لئے متغیر استعمال کرنے کے لئے اس کا استعمال کریں.
- : نارتھ - بچہ (ن)
- آخری بچے سے گزرنے والے عین مطابق بچے عناصر سے ملیں.
- : اینٹی کی قسم (این)
- دستاویز کے درخت میں اس سے قبل اسی نام سے بھائی عناصر کو ملائیں.
- : nth-end-type (این)
- بھائی کے عناصر کو نیچے سے گننے کے اسی نام کے ساتھ ملائیں.
- :آخری بچہ
- والدین کے آخری بچے عنصر سے ملائیں.
- : سب سے پہلے قسم
- اس قسم کے پہلے بہن بھائی عنصر سے ملیں.
- آخری قسم کی
- اس قسم کے آخری بھائی عنصر سے ملائیں.
- :اکلوتابچہ
- اس عنصر سے ملائیں جو اس کے والدین کا واحد بچہ ہے.
- صرف قسم کی
- اس عنصر سے ملیں جو اس کی قسم میں سے ایک ہے.
- خالی
- اس عنصر سے ملائیں جو کوئی اولاد نہیں ہیں (متن نوڈس سمیت).
- ہدف
- ایک عنصر سے ملائیں جو حوالہ دینے والے یو آرآر کا ہدف ہے.
- : فعال
- جب فعال ہوجائے تو اس عنصر سے ملائیں.
- : غیر فعال
- یہ غیر فعال ہونے پر عنصر سے ملائیں.
- جانچ پڑتال
- جب اس کی جانچ پڑتال کی گئی ہے (ریڈیو کے بٹن یا چیک باکس) کو عنصر سے ملائیں.
- : نہیں (ے)
- میچ جب عنصر سادہ انتخاب کنندہ سے متفق نہیں ہوتا.
ایک نیا مجموعہ:
- عنصر A ~ elementB
- جب عنصر اے عنصر اے کے بعد کہیں گے تو اس سے ملائیں، لازمی طور پر نہیں.
نئی پراپرٹیز
CSS3 نے بھی ایک نئی سی ایس ایس کی خصوصیات متعارف کرایا. ان میں سے بہت سے خصوصیات بصری شیلیوں کو تخلیق کرنا چاہتے تھے جو فوٹو گرافی کی طرح گرافکس کے پروگرام کے ساتھ زیادہ سے زیادہ شریک ہوں گے. ان میں سے کچھ، جیسے سرحدی ریڈیو یا باکس سائے، CSS3 کے تعارف کے بعد کے ارد گرد موجود ہیں. دوسروں جیسے، flexbox یا یہاں تک کہ سی ایس ایس گرڈ ایسی نئی شیلیوں ہیں جو اب بھی اکثر CSS3 اضافی طور پر سمجھا جاتا ہے.
CSS3 میں، باکس ماڈل تبدیل نہیں ہوا ہے. لیکن نئے طرز کی خصوصیات کا ایک گروپ ہے جو آپ کو اپنے بکس کے پس منظر اور سرحدوں میں سٹائل کرنے میں مدد کرسکتا ہے.
ایک سے زیادہ پس منظر میں مراج
پس منظر کی تصویر، پس منظر کی پوزیشن، اور پس منظر سے دوبارہ شیلیوں کا استعمال کرتے ہوئے آپ باکس میں ایک دوسرے کے سب سے اوپر پر پرتوں کے متعدد پس منظر کی تصاویر کی وضاحت کرسکتے ہیں. پہلی تصویر صارف کے قریب ترین پرت ہے، مندرجہ ذیل افراد کے پیچھے پینٹ ہے. اگر کوئی پس منظر کا رنگ ہے، تو یہ تمام تصویر تہوں کے نیچے پینٹ کیا جاتا ہے.
نیا پس منظر انداز پراپرٹیز
CSS3 میں کچھ نئے پس منظر کے خصوصیات بھی ہیں.
- پس منظر کلپ
- اس پراپرٹی کی وضاحت کرتا ہے کہ پس منظر کی تصویر کلپ کیا جاسکتی ہے. پہلے سے طے شدہ سرحد کی سرحد ہے، لیکن یہ پیڈ باکس یا مواد کے باکس میں تبدیل کیا جا سکتا ہے.
- پس منظر کی ابتدا
- اس پراپرٹیز کا تعین ہوتا ہے کہ پس منظر کا پس منظر باکس، سرحد کے باکس، یا مواد کا باکس میں جگہ ہونا چاہئے.
- پس منظر کا سائز
- یہ جائیداد آپ کو پس منظر کی تصویر کے سائز کی نشاندہی کرنے کی اجازت دیتا ہے. اس صفحے کو فٹ ہونے کے لۓ آپ کو چھوٹے تصاویر کو بڑھانے کی اجازت دیتا ہے.
موجودہ پس منظر انداز پراپرٹیز میں تبدیلیاں
موجودہ پس منظر سٹائل کی خصوصیات میں کچھ تبدیلی بھی ہیں:
- پس منظر دوبارہ
- اس پراپرٹی کے لئے دو نیا اقدار ہیں: جگہ اور گول. خلائی ٹائل کی تصویر کو بغیر کسی بھی باکس میں اندرونی طور پر خالی جگہ بنا دیتا ہے. راؤنڈ پس منظر کی تصویر کو بچاتا ہے تاکہ یہ باکس میں مکمل وقت ٹائل کرے.
- پس منظر منسلک
- ایک نیا قدر "مقامی" شامل ہے تاکہ اس عنصر کو اسکرین بار کی حیثیت سے عنصر کے مواد سے طومار کردیں.
- پس منظر
- پس منظر کی املاک کی جائیداد کا سائز اور اصل خصوصیات میں اضافہ ہوتا ہے.
CSS3 سرحدی پراپرٹیز
CSS3 کی سرحدوں میں ہم ایسے شیلیوں ہوسکتے ہیں جو ہم استعمال کرتے ہیں (ٹھوس، ڈبل، دھڑکن، وغیرہ) یا ان کی تصویر ہوسکتی ہے. پلس، CSS3 گول کونے بنانے کی صلاحیت میں لاتا ہے. سرحدی تصاویر دلچسپ ہیں کیونکہ آپ چار چار سرحدوں کی تصویر بناتے ہیں اور پھر سی ایس ایس کو بتائیں کہ اس تصویر کو آپ کی سرحدوں پر کیسے لاگو کرنا ہے.
نئی سرحد انداز کی خصوصیات
CSS3 میں کچھ نئی سرحدی خصوصیات ہیں:
- سرحدی ردعمل
- سرحدی چوٹی دائیں ریڈیو ، سرحد کے نیچے-دائیں ریڈیو ، سرحد کے نیچے بائیں-ردعمل ، سرحدی چوٹی بائیں-ردعمل
- یہ خصوصیات آپ کو اپنی سرحدوں پر گول کونے بنانے کی اجازت دیتا ہے.
- سرحد کی تصویر کا ذریعہ
- سرحد کی شیلیوں کی بجائے پہلے سے بیان کی گئی تصویر کی بجائے استعمال کرنے کیلئے تصویر منبع فائل کی وضاحت کرتا ہے.
- سرحد کی تصویر کا ٹکڑا
- سرحدی تصویر کے کنارے سے اندرونی آفس کی ترویج دیتا ہے
- سرحد کی تصویر چوڑائی
- اپنی سرحد کی تصویر کے لئے چوڑائی کی قیمت کی وضاحت کرتا ہے.
- سرحد کی تصویر کا آغاز
- اس حد کی وضاحت کرتا ہے کہ سرحدی تصویر کا میدان سرحد کے باہر سے باہر ہوتا ہے.
- سرحدی تصویر کی شکل
- اس بات کی وضاحت کرتا ہے کہ سرحد کی تصویر کے اطراف اور درمیانے حصوں کو کیسے ٹائل کیا جانا چاہئے.
- سرحد کی تصویر
- تمام سرحدی تصویر کی خصوصیات کے لئے آثار قدیمہ کی جائیداد.
سرحدوں اور پس منظر سے متعلق اضافی CSS3 پراپرٹیز
جب ایک صفحہ کے وقفوں میں باکس ٹوٹ جاتا ہے تو، لائن وقفے کے لئے کالم وقفے (ان لائن عناصر کے لئے) باکس سجاوٹ-وقفے جائیداد کی وضاحت کرتا ہے کہ نئے بکسوں کو سرحد اور پادری کے ساتھ لپیٹ کیا جاتا ہے. پس منظر اس پراپرٹی کا استعمال کرکے متعدد ٹوٹا ہوا خانوں کے درمیان تقسیم کیا جا سکتا ہے.
وہاں بھی ایک ایسی سایہ کی پراپرٹی ہے جس میں سائے عناصر میں سائے شامل کرنے کے لئے استعمال کیا جا سکتا ہے.
CSS3 کے ساتھ، اب آپ میزبان یا پیچیدہ ڈی ٹی ٹیگ ڈھانچے کے بغیر آسانی سے ویب صفحہ کو ایک سے زیادہ کالمز کے ساتھ آسانی سے بنا سکتے ہیں. آپ صرف اس براؤزر کو بتائیں کہ جسم کے عناصر کو کتنا کالم ہونا چاہئے اور وہ کتنا وسیع ہونا چاہئے. پلس آپ کو سرحدوں (قواعدات)، پس منظر کے رنگوں میں شامل کرسکتے ہیں جو کالم کی اونچائی تک پہنچ جاتی ہے، اور آپ کا متن خود بخود تمام کالموں کے ذریعے بہہ جائے گا.
CSS3 کالم - کالم کی تعداد اور چوڑائی کی وضاحت کریں
تین نئی خصوصیات ہیں جو آپ کو اپنے کالمز کی تعداد اور چوڑائی کی وضاحت کرنے کی اجازت دیتے ہیں:
- کالم چوڑائی
- اپنی چوڑائیوں کو ہونا چاہئے چوڑائی کی وضاحت کریں. پھر براؤزر اس جگہ کو بھرنے کے لئے متن بہاؤ گا جس کے ساتھ وسیع پیمانے پر کالم.
- کالم شمار
- صفحے پر کالموں کی تعداد کی وضاحت کرتا ہے. براؤزر اس وقت خلا میں فٹ ہونے کے لئے وسیع پیمانے پر کالم بنائے گا، لیکن صرف وہی نمبر جسے آپ نے وضاحت کی ہے.
- کالم
- شارتھینڈ کی جائیداد جہاں آپ چوڑائی یا نمبر کی وضاحت کرسکتے ہیں (یا دونوں، لیکن یہ کہ کم از کم احساس ہوتا ہے).
CSS3 کالم فرق اور قواعد
اسی multicolumn کے منظر میں کالم کے درمیان فرق اور قواعد کی جاتی ہیں. فرق کالموں کو الگ کردیں گے، لیکن قواعد کسی بھی جگہ نہیں اٹھاتے ہیں. اگر ایک کالم کی حکمرانی خلا سے زیادہ وسیع ہے، تو یہ ملحقہ کالموں کو اوورلوپ کرے گا. کالم قوانین اور فرق کے لئے پانچ نئی خصوصیات ہیں:
- کالم فرق
- کالمز کے درمیان فرق کی چوڑائی کی وضاحت کرتا ہے.
- کالم - حکمرانی رنگ
- حکمران کا رنگ کی وضاحت کرتا ہے.
- کالم - اصول سٹائل
- حکمرانی کی طرز کی وضاحت کرتا ہے (ٹھوس، ڈاٹٹ، ڈبل، وغیرہ).
- کالم - قواعد چوڑائی
- حکمران کی چوڑائی کی وضاحت کرتا ہے.
- کالم حکمران
- ایک آثار قدیمہ کی جائیداد میں تین بار کالم کی حکمران کی خصوصیات ایک بار پھر بیان کرتی ہے.
CSS3 کالم توڑ، اسپیننگ کالم، اور کالم بھرنے
کالم وقفے میں ایک ہی CSS2 اختیارات کا استعمال ہوتا ہے جس میں پادری مواد میں وقفے کی وضاحت کرنے کے لئے استعمال کیا جاتا ہے، لیکن تین نئی خصوصیات کے ساتھ: وقفے سے قبل ، وقفے بعد ، وقفے اور وقفے .
ٹیبل کے ساتھ کی طرح، آپ عناصر کو کالموں کی مدت کے ساتھ کالمز تک محدود کرنے کے لئے مقرر کرسکتے ہیں. یہ آپ کو ایسے عنوانات بنانا چاہتی ہے جو ایک سے زیادہ کالمز ایک اخبار کی طرح ہوتا ہے.
کالم بھرنے کا فیصلہ ہر کالم میں کتنا مواد ہوگا. متوازن کالم ہر ایک کالم میں مواد کی ایک ہی رقم ڈالنے کی کوشش کرتے ہیں جبکہ آٹو صرف مواد کو بہلاتا ہے جب تک کہ کالم مکمل ہوجائے اور اگلے ایک تک جاتا ہے.
CSS3 میں مزید خصوصیات جو کہ ایس ایس ایس 2 میں شامل نہیں ہے
CSS3 میں بہت سے اضافی خصوصیات موجود ہیں جو CSS2 میں موجود نہیں ہیں، بشمول:
- سی ایس ایس سانچہ ترتیب ماڈیول اور CSS3 گرڈ پوزیشننگ ماڈیول : سی ایس ایس کے ساتھ گرڈ تخلیق.
- CSS3 متن ماڈیول : آؤٹ لک کا متن اور سی ایس ایس کے ساتھ ڈراپ سائے بھی تخلیق کریں.
- CSS3 رنگین ماڈیول : اب ابعاد کے ساتھ.
- باکس ماڈل میں تبدیلیاں : ایک مرچ کی جائیداد سمیت جو IE ٹیگ کی طرح کام کرتا ہے.
- CSS3 صارف انٹرفیس ماڈیول : آپ کو نئے کرسر، اعمال کے جوابات، مطلوبہ شعبوں، اور یہاں تک کہ سائز کے عناصر کو دینے .
- میڈیا سوالات : میڈیا سوالات کی وضاحت کرنے کے بعد آپ کو زیادہ لچک کی اجازت دیتی ہے کہ طرز شیٹ کو کیسے استعمال کیا جاسکتا ہے. مثال کے طور پر، آپ ایک طرز شیٹ کی وضاحت کرسکتے ہیں جو صرف ہینڈ ہیلڈ آلات کے لئے ہے جس میں 20em سے بڑا نقطہ نظر ہے.
- CSS3 روبی ماڈیول : دستاویزات کو تشریح کرنے کے لئے روایتی روبی کا استعمال کرنے والے زبانوں کے لئے مدد فراہم کرتا ہے.
- CSS3 پاجڈ میڈیا ماڈیول : پائیڈ میڈیا (کاغذ، شفافیت، وغیرہ) کے لئے بھی زیادہ حمایت کے لئے.
- پیدا کردہ مواد : ایل چلانے والے ہیڈر اور فوٹرز، پیڈ گوٹس، اور دیگر مواد جو پروگرام میں پیدا ہوتے ہیں، خاص طور پر پرجاتی میڈیا کے لئے.
- CSS3 تقریر ماڈیول : جامد سی ایس ایس میں تبدیلی.