আপনার শীর্ষ 4 সিএসএস বৈশিষ্ট্যগুলি কী?

এটাই ডনি ডি আমাতো সাম্প্রতিক পোস্টে জিজ্ঞাসা করেছেন::

আপনাকে একটি ওয়েবসাইট তৈরি করতে বলা হয়েছে তবে আপনি কেবল 4 টি সিএসএস সম্পত্তি ব্যবহার করতে পারেন, সেগুলি কী?

এটি সত্যিই সিএসএস-ট্রিকস দলকে কথা বলে। এটি “যদি আপনি কেবল একটি প্রত্যন্ত দ্বীপে আপনার সাথে একটি অ্যালবাম নিতে পারতেন …” এর নার্দি সংস্করণ এবং প্রত্যেকেরই আলাদা মতামত ছিল যা দুর্দান্ত কারণ এটি অগোছালো, অ-রৈখিক নৈপুণ্য প্রদর্শন করে ফ্রন্ট-এন্ড বিকাশকারীর মতো ভাবছেন।

উত্তর দেওয়ার জন্য বেশ সোজা জিনিস বলে মনে হচ্ছে, তাই না? তবে ডনি যেমন বলেছেন, এটি কিছু কৌশল নেয়। পছন্দ করুন, বলুন আপনার অগ্রাধিকার তালিকায় ব্যবধান উচ্চ। আপনি কি ব্যবহার করতে যাচ্ছেন? margin? padding? সম্ভবত আপনি লেআউটে ঝুঁকছেন এবং সাথে যান gap একটি ফ্লেক্সবক্সের দিকের অংশ হিসাবে … তবে তারপরে আপনি প্রতিশ্রুতিবদ্ধ display আপনার বিকল্পগুলির একটি হিসাবে। এটি দ্রুত আপনার পছন্দগুলি খেতে পারে!

আমাদের উত্তরগুলি বেশ সামঞ্জস্যপূর্ণ, তবে আলোচনার পরে আরও বেশি রূপান্তরিত হয়েছে এবং আমরা সকলেই বিভিন্ন অগ্রাধিকার নিয়ে এটিতে আসছিলাম। আমি প্রতিটি ব্যক্তির “অন্ত্র” প্রতিক্রিয়া ভাগ করব কারণ আমি পছন্দ করি এটি কতটা কাঁচা। আমি মনে করি আপনি দেখতে পাবেন যে মিশ্রণে সর্বদা একটি সমঝোতা রয়েছে, তবে এই সমঝোতাগুলি সত্যই কোনও ব্যক্তির কার্ডগুলি প্রকাশ করে যতটা তারা অত্যধিক শক্ত সীমাবদ্ধতার সাথে পরিস্থিতিতে সবচেয়ে গুরুত্বপূর্ণ বলে মনে করে।

জুয়ান দিয়েগো রদ্রিগেজ

জুয়ান এবং আমি একই পছন্দগুলির খুব কাছাকাছি এসেছি, যেমন আমরা কিছুটা দেখব:

• font:: টাইপোগ্রাফি একটি অগ্রাধিকার এবং আমরা এই একক শর্টহ্যান্ডের সাথে প্রচুর উপাদান বৈশিষ্ট্য পাই।
• padding:: একটি সামান্য প্যাডিং জিনিসকে শ্বাস দেয় এবং ভিজ্যুয়াল বিচ্ছেদটিতে সহায়তা করে।
• background:: একটি ছোট প্যাকেজে প্রচুর স্টাইলিং সম্ভাবনা সহ আরও একটি শর্টহ্যান্ড।
• color:: আরও ভিজ্যুয়াল হায়ারার্কি।

তবে তিনি প্রক্রিয়াটিতে নিজেকে কিছুটা বিতর্ক করছিলেন:

স্যুইচিংয়ের কথা ভাবছি color সঙ্গে place-itemsযেহেতু এটি ব্লক উপাদানগুলিতে কাজ করে। grid প্রয়োজন হবে displayযদিও)।

রায়ান ট্রিম্বল

রায়ান সব সম্পর্কে বাস কাঠামো:

• display:: এটি লেআউটগুলির একটি জগতে খোলে তবে সবচেয়ে গুরুত্বপূর্ণ flex।
• flex-direction:: মিডিয়া প্রশ্নের সাথে সহজেই সামঞ্জস্যযোগ্য বহু-দিকনির্দেশক লেআউটগুলি বিবেচনা করা ভাল ধারণা।
• width:: এটি উপাদান এবং পাঠ্যকে সীমাবদ্ধ করার পাশাপাশি ফ্লেক্স পাত্রে বিভক্ত করতে সহায়তা করে।
• margin:: এটি ব্যবধানের জন্য যা এর চেয়ে কিছুটা বেশি বহুমুখী gapআমাদের সহজেই কেন্দ্রের উপাদানগুলিতে অনুমতি দেওয়ার সময়।

এবং রায়ান সীমা থেকে কিছুটা দূরে পৌঁছাতে প্রতিরোধ করতে পারেনি:

স্বয়ংক্রিয় রঙ থিম সমর্থন জন্য, এবং অতিরিক্ত কোনও সিএসএস বৈশিষ্ট্য প্রয়োজন: <meta name="color-scheme" content="dark light">

ড্যানি ব্ল্যাক

প্রতিটি দলের একটি ওয়াইল্ড কার্ড প্রয়োজন:

বিপরীতে আমি মনে করি আমি বেছে নিয়েছি font, paddingএবং color। আমি এমনকি একটি 4 র্থ বেছে নেব না।

• font:: আপনি যদি পরিচিত হন তবে এটি কোনও বড় অবাক নয় ড্যানির লেখা।
• padding:: এখনও অবধি, রায়ান একমাত্র এক ব্যক্তি padding মূল পছন্দ হিসাবে!
• color:: খুব খারাপ এটি ঠিক বেকড হয় না fontআর!

আমি আরও উল্লেখ করব যে ড্যানি শীঘ্রই চারটি পছন্দ ব্যবহার করার সিদ্ধান্ত নিয়ে প্রশ্ন করেছিলেন:

আমার ধারণা আমাদের দরকার width একটি ভাল লাইনের দৈর্ঘ্য অর্জন করতে।

আতঙ্কিত

এটি বর্গক্ষেত্রের মধ্যে ঝুঁকির প্রথম তালিকা সিএসএস গ্রিডঅনুমতি দেওয়া grid শর্টহ্যান্ড একটি সম্পূর্ণ লেআউট সিস্টেম থাকার পক্ষে একটি পছন্দ নিতে:

• font:: এটি একটি জনপ্রিয়, তাই না?
• display:: মেকস grid উপলব্ধ
• grid:: এই জন্য প্রয়োজনীয় display পদ্ধতির
• color:: পাঠ্য রঙে ছিটিয়ে দেওয়ার জন্য যেখানে এটি সহায়তা করতে পারে

আমি ভালবাসি যে রায়ান এবং সুনকানমি কাঠামোর দিক থেকে ভাবছেন, যদিও বিভিন্ন কারণে খুব আলাদা উপায়ে!

জেল লিউ

জেলের নিজস্ব কথায়: “এখানে সত্যিই সরল এবং সাধারণ সাইট।”

• font:: বিষয়বস্তু এখনও তথ্যের সবচেয়ে গুরুত্বপূর্ণ অংশ।
• max-width:: প্রকারের পরিমাপ ঠিক আছে তা নিশ্চিত করে।
• margin:: আমাকে ব্যবধান নিয়ে চারপাশে খেলতে দেয়।
• color:: এটি নিশ্চিত করে যে কোনও খাঁটি কালো/সাদা বৈসাদৃশ্য নেই যা চোখে ব্যথা করে। আমি ব্যাকগ্রাউন্ডের জন্যও পছন্দ করি তবে আমাদের কেবল চারটি পছন্দ রয়েছে।

তবে এই পছন্দগুলিতে কিছুটা উপদ্রব রয়েছে, যেমন তিনি ব্যাখ্যা করেছেন: “তবে আমি স্যুইচ আপ করতাম color জন্য background আরও জটিল তথ্য সহ সাইটগুলিতে সঠিক বিভাগের প্রয়োজন। সেক্ষেত্রে আমিও স্যুইচ করতাম margin সঙ্গে padding। “

অমিত শীন

অমিতের নির্বাচনগুলিতে সরাসরি পাওয়া:

• font
• color
• background
• color-scheme

পছন্দগুলি মূলত ডিফল্ট ব্যবহারকারী এজেন্ট শৈলীর বিরুদ্ধে লড়াই করতে চায়:

জিনিসটি হ’ল, যদি আমাদের কেবল চারটি সম্পত্তি থাকে তবে আমরা ব্যবহারকারী এজেন্টদের উপর প্রচুর নির্ভর করে শেষ করি এবং কেবলমাত্র আমি যে জিনিসটি পরিবর্তন করতে চাই তা হ’ল ফন্টগুলি। তবে আমরা যখন এটিতে থাকি তখন আসুন কিছু রঙ নিয়ন্ত্রণ যুক্ত করি। আমি নিশ্চিত না যে আমি আসলে তাদের কতটা ব্যবহার করব, তবে তাদের উপলব্ধ করা ভাল হবে।

জিওফ গ্রাহাম

ঠিক আছে, আমি এখন তেমন উত্তেজনাপূর্ণ নই যে আপনি অন্য সবার পছন্দগুলি দেখেছেন। আপনি এখানে প্রচুর ওভারল্যাপ দেখতে পাবেন:

• font:: পাঠ্য শৈলীর ম্যাসেজ করার জন্য পুরো সাতটি সম্পত্তির জন্য একটি শর্টহ্যান্ড।
• color:: দেখে মনে হচ্ছে এটি একটি ভিজ্যুয়াল শ্রেণিবিন্যাস প্রতিষ্ঠা করতে এবং একটি উপাদানকে অন্য থেকে আলাদা করার জন্য সুপার কার্যকর হবে।
• padding:: আমি কোনও উপাদানটির সামগ্রীর বাক্স এবং এর অভ্যন্তরীণ প্রান্তের মধ্যে একটি সামান্য শ্বাসকষ্ট ছাড়া বাঁচতে পারি না।
• color-scheme:: ভাল ন্যূনতম থিমিং যা পাশাপাশি সুন্দরভাবে কাজ করবে color এবং সমর্থন light-dark() ফাংশন।

স্পষ্টতই, আমি সবাই টাইপোগ্রাফিতে আছি। এটি খুব ভাল জিনিস হতে পারে বা জিনিসগুলি বের করার ক্ষেত্রে এটি আমাকে সত্যিই বাধা দিতে পারে। আমাকে সত্যিই ব্যবহারের তাগিদে লড়াই করতে হয়েছিল display কারণ আমি সবসময় পাশাপাশি পাশাপাশি পাশাপাশি রাখার জন্য এটি অবিশ্বাস্যভাবে কার্যকর বলে মনে করি যা ব্লক-স্তরের উপাদানগুলির সাথে অন্যথায় সম্ভব হবে না।

তোমার পালা!

কৌতূহলী মন জানতে চান! কোন চারটি সম্পত্তি আপনি কি মরুভূমির দ্বীপে আপনার সাথে নিয়ে যাবেন?