নরমালাইজ.কম এবং রিসেট সিএসএসের মধ্যে পার্থক্য কী?


565

সিএসএস রিসেটটি কী তা আমি জানি তবে সম্প্রতি আমি নরমালাইজ সিএসএস নামে এই নতুন জিনিসটি সম্পর্কে শুনেছি

নরমালাইজ.কম এবং রিসেট সিএসএসের মধ্যে পার্থক্য কী ?

সিএসএসকে সাধারণীকরণ এবং সিএসএস পুনরায় সেট করার মধ্যে পার্থক্য কী?

এটি কি সিএসএস রিসেটের জন্য কেবল নতুন গুঞ্জনের শব্দ?

উত্তর:


800

আমি normalize.css এ কাজ করি work

প্রধান পার্থক্যগুলি হ'ল:

  1. সাধারণকরণ.কম সব কিছু "আনস্টাইলিং" না করে দরকারী ডিফল্ট সংরক্ষণ করে। উদাহরণস্বরূপ, উপাদান পছন্দ supবা sub"শুধু কাজ" normalize.css সহ পর (এবং আসলে আরো জোরালো তৈরি করা হয়) যেহেতু তারা reset.css সহ পর স্বাভাবিক লেখা থেকে চাক্ষুষরূপে আলাদা করে চেনা আছে। সুতরাং, normalize.css আপনার উপর ভিজ্যুয়াল শুরুর পয়েন্ট (একজাতীয়) চাপায় না। এটি সবার স্বাদে নাও পারে। করণীয় হ'ল সর্বোত্তম বিষয় হ'ল উভয়ের সাথে পরীক্ষা করা এবং আপনার পছন্দগুলির সাথে কোন জেলগুলি দেখুন।

  2. সাধারণীকরণ.এসএস কিছু সাধারণ বাগগুলি সংশোধন করে যা রিসেটসিএসএসের সুযোগের বাইরে থাকে। এটা তোলে reset.css চেয়ে বৃহত্তর সুযোগ আছে, এবং এছাড়াও মত সাধারণ সমস্যার জন্য বাগ সংশোধন করা হয়েছে প্রদান করে: HTML5 এর উপাদান, অভাবের জন্য প্রদর্শন সেটিংস fontফর্ম উপাদান দ্বারা উত্তরাধিকার, সংশোধন font-sizeজন্য রেন্ডারিং pre, IE9 এর SVG ওভারফ্লো, এবং buttoniOS এ স্টাইলিং বাগ।

  3. Normalize.css আপনার ডেভ সরঞ্জামগুলিতে বিশৃঙ্খলা সৃষ্টি করে না। রিসেট.এসএস ব্যবহার করার সময় একটি সাধারণ জ্বালা হ'ল বৃহত উত্তরাধিকার শৃঙ্খলা যা ব্রাউজার সিএসএস ডিবাগিং সরঞ্জামগুলিতে প্রদর্শিত হয়। লক্ষ্যযুক্ত স্টাইলিংয়ের কারণে এটি নরমালাইজ.এসএসএসের সাথে কোনও সমস্যা নয়।

  4. Normalize.css আরও মডিউলার। প্রকল্পটি তুলনামূলকভাবে স্বতন্ত্র বিভাগে বিভক্ত হয়ে গেছে, আপনার পক্ষে সম্ভাব্য বিভাগগুলি (ফর্ম নরমালাইজেশনের মতো) অপসারণ করা সহজ করে তোলে যদি আপনি জানেন যে সেগুলি কখনই আপনার ওয়েবসাইটের প্রয়োজন হবে না।

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

নরমালাইজ সিএসএস সম্পর্কে একটি নিবন্ধে আমি এ সম্পর্কে আরও বিস্তারিত লিখেছি


19
বেশিরভাগ ক্ষেত্রে, আপনি এগুলিকে শূন্যে রেখে যান না (রিসেট ব্যবহার করার সময়), সুতরাং আপনি আসলে কম কোড লিখছেন। আপনি যদি কিছু মান শূন্য করতে চান, তবে সেই স্টাইলটি সেই উপাদানটির সাথে মিশ্রিত হবে যা এর জন্য বোঝানো হয়েছে এবং এটি ডিবাগিংকে সহজ করতে হবে।
নেকোলাস

8
এবং এটি অনেকগুলি পুনরায় সেট করার ক্ষেত্রে একটি উল্লেখযোগ্য সমস্যা, এই বিষয়টি সহ যে সমস্ত কিছু শূন্য করা ব্রাউজারকে ধীর করে দেয় including
রব

4
এবং এটি পুনরায় সেট করার সুবিধাও হ'ল
ড্যানিয়েল

4
হ্যাঁ, সাধারণত আপনি প্যাডিং এবং মার্জিন শূন্য হতে চান না তবে আমি কি এই বিন্দুটি মিস করি না, না, আপনিও ডিফল্টটি চান না?
guioconnor

9
ব্যক্তিগতভাবে আমি সাধারনত বন্ধ করেছি, যদিও আমি এখনও এটি ব্যবহার করি। এখানে প্রচুর পয়েন্টগুলি সত্যই ডুবে গেছে (আরও ভাল ডকুমেন্টেশন ...?)। সাধারণীকরণটি মতামতযুক্ত, সুতরাং এটি আপনার উপর একটি ভিজ্যুয়াল শুরুর পয়েন্ট চাপিয়ে দেয় (এই উত্তরটি যা বলে তা সত্ত্বেও)। এটি পুরানোও হতে পারে। আপনি এটি ব্যবহার করার পরে রিসেট.সিএস কখনই পুরানো হতে পারে না। আর আপনি যে অন্য সংখ্যার কথা ভাবতে পারেন তার তুলনায় মার্জিন এবং প্যাডিং 0 হওয়ার চেয়ে বেশি সম্ভাবনা রয়েছে, তাই আপনি বিকাশকালে সমস্ত কিছু পুনরায় সেট করা আসলে সহায়ক। ব্রাউজার সমস্যাগুলির জন্য সাধারণকরণটি ভাল তবে আমি এটি ব্যবহার করার মূল কারণ।
চক লে বাট

254

প্রধান পার্থক্য হ'ল:

  • সিএসএস রিসেটের লক্ষ্যগুলি সমস্ত বিল্ট-ইন ব্রাউজার স্টাইলিং সরিয়ে ফেলার লক্ষ্য । H1-6, পি, শক্তিশালী, এম, এবং সেটেরার মতো স্ট্যান্ডার্ড উপাদানগুলি একেবারে দেখতে একই রকম দেখা দেয়, কোনও সাজসজ্জা নেই। তারপরে আপনার নিজের সমস্ত সাজসজ্জা যুক্ত করার কথা ।

  • সিএসএসের সাধারণকরণ ব্রাউজারগুলিতে বিল্ট-ইন ব্রাউজার স্টাইলিংকে সামঞ্জস্যপূর্ণ করার লক্ষ্য । এইচ 1-6 এর মতো উপাদানগুলি ব্রাউজারগুলির মধ্যে ধারাবাহিক উপায়ে সাহসী, বৃহত্তর এবং সিটিআর প্রদর্শিত হবে। তারপরে আপনার সাজসজ্জার ক্ষেত্রে আপনার ডিজাইনের প্রয়োজনের মধ্যে কেবলমাত্র পার্থক্য যুক্ত করার কথা ।

যদি আপনার নকশা ক) টাইপোগ্রাফি এবং সেটেরার জন্য প্রচলিত কনভেনশন অনুসরণ করে এবং খ) নরমালাইজ সিএসএস আপনার লক্ষ্য দর্শকদের জন্য কাজ করে, তবে সিএসএস রিসেটের পরিবর্তে নরমালাইজ.সিএসএস ব্যবহার করা আপনার নিজের সিএসএসকে আরও ছোট এবং দ্রুততর করে তুলবে।


6
@ জিতেন্দ্র ব্যাস: - সত্যিই কেবল একটি উপায় আছে: ভালভাবে মন্তব্য করা নরমালাইজ করুন C সিএসএস কোডটি পড়ুন এবং সিদ্ধান্ত নিন যে এটি আপনার প্রয়োজনের জন্য উপযুক্ত কিনা। github.com/necolas/normalize.css/blob/master/normalize.css
এম

অন্য দ্রষ্টব্য: নরমালাইজ সিএসএস লক্ষ্য হিসাবে যতটা সম্ভব নিরবচ্ছিন্ন হতে পারে, যা কোনও বিকাশকারীকে নির্দিষ্টকরণের বিরোধের সাথে লড়াই না করেই তাদের কোড আরও সহজভাবে লিখতে দেয়।
zzzzBov

সুতরাং আসুন বলি যে আমি যখন বিকাশ করি তখন পুনরায় সেট করতে চাই। এবং একবার হয়ে গেলে আমি নরমালাইজ.এসএস বা কিছু জেএস চাই যা আমার সমস্ত পরিবর্তন হয় না এবং ব্রাউজারে একই হয়। অথবা আমি পরিবর্তন করেছি এবং পরিবর্তনের পরে সেগুলি ব্রাউজারের মতো হয়ে গেছে এবং তাদের ক্লায়েন্টের পক্ষে সরিয়ে ফেলতে হবে। সুতরাং দ্রুত ক্লায়েন্টের পাশে সেই 'প্রোগ্রাম' বিকাশের সময় পুনরায় সেট করা সহায়তা করবে। দুজনেই খুশি। বেঁচে থাকার অনেক স্মার্ট উপায়।
মুহাম্মদ উমার

অনুশীলনে আপনি যাইহোক নর্মালাইজের সমস্ত স্টাইল ওভাররাইট করে শেষ করবেন। তত্ত্বটি দুর্দান্ত, তবে এই ওওসিএসএস বিশ্বে এটি কখনও বাস্তবে সেভাবে কাজ করে না।
চক লে বাট

40

নর্মালাইজড সিএসএস মূলত শৈলীর একটি সেট যা এর লেখক যা ভেবেছিলেন তাতে ভাল লাগবে এবং ব্রাউজারগুলিতে এটি সুসংগত দেখায়। মূলত উপাদানগুলি থেকে স্ট্রিপগুলি পুনরায় সেট করুন যাতে আপনার কাছে সমস্ত কিছুর স্টাইলিংয়ের উপর আরও নিয়ন্ত্রণ থাকে।

আমি উভয় ব্যবহার।

রিসেট থেকে কিছু স্টাইল, কিছু নরমালাইজ সিএসএস থেকে। উদাহরণস্বরূপ, নরমালাইজ.কম থেকে, সমস্ত ইনপুট উপাদানগুলির একই ফন্ট রয়েছে তা নিশ্চিত করার জন্য একটি স্টাইল রয়েছে, যা ঘটে না (পাঠ্য ইনপুট এবং টেক্সারিয়াসের মধ্যে)। রিসেটের তেমন কোনও স্টাইল নেই, সুতরাং ইনপুটগুলির বিভিন্ন ফন্ট রয়েছে, যা সাধারণত চাওয়া হয় না।

সুতরাং মূলত, দুটি সিএসএস ফাইল ব্যবহার করে সবকিছুকে 'সমানকরণ' করা আরও ভাল কাজ করে;)

শুভেচ্ছা!


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

3
@ricmetalster, তাই পুনরায় সেট.এসএস এবং নরমালাইজ সিএসএস থেকে কার্যকারিতা একত্রিত করার জন্য আপনার নিজের সিএসএস পুনরায় লিখতে হবে?
হাইজয়

2
আপনি যদি উভয়ই ব্যবহার করতে চান, আপনি কি প্রথমে "পুনরায় সেট" তালিকাটি তৈরি করতে পারেন তারপরে "নরমালাইজ" করে তারপরে আপনার স্টাইলগুলি যুক্ত করতে পারেন?
ক্রেগ

আমি "মনে করি না" এটিকে গ্রহণ করি এবং উভয়কেই ব্যবহার করি এবং আমার এসএএসএস আমদানিতে অন্তর্ভুক্ত হিসাবে এটিগুলিকে কল করি @ ইম্পোর্টে '_ সাধারণিক' && '_সেট'
কিলস্ক্রিন ২

6

প্রথমটি reset.cssহ'ল আপনি ব্যবহার করতে পারেন এমন সবচেয়ে খারাপ গ্রন্থাগার, কারণ এটি মার্জিন প্যাডিং এবং অন্যান্য বৈশিষ্ট্যের মান নির্ধারণের পরে HTML এর মানক কাঠামোটি সরিয়ে দেয় এবং আপনি যা কিছু লেখেন ঠিক তেমন লেখায় প্রদর্শিত হয় 0। সুতরাং উদাহরণস্বরূপ আপনি এটি দেখতে পাবেন যে <H1>একই হবে <H6>

অন্যদিকে Normalize.cssস্ট্যান্ডার্ড কাঠামো ব্যবহার করে এবং এতে বিদ্যমান প্রায় সমস্ত ত্রুটিগুলিও ঠিক করে দেয়। উদাহরণস্বরূপ, এটি একটি ব্রাউজার থেকে অন্য ব্রাউজারে ফর্ম দেখিয়ে সমস্যাটি সমাধান করে। এই বৈশিষ্ট্যগুলিকে সংশোধন করে এগুলি ফিক্সগুলি স্বাভাবিক করুন যাতে আপনার উপাদানগুলি সমস্ত ব্রাউজারে একই প্রদর্শিত হয়।


1
আপনার ব্যবহারের ক্ষেত্রে নির্ভর করে। আপনার উদাহরণ বিবেচনা করে, যদি আমাকে আমার প্রকল্পের জন্য সমস্ত শিরোনাম ট্যাগের ফন্ট শৈলীর সংশোধন করতে হয়, আমি সত্যিই ডিফল্ট মানগুলির কোনও ব্যবহার করব না, আমি কি করব? কারও নিজের প্রকল্পে কোনও ব্যবহার খুঁজে পাওয়া যায় না বলেই কোনও গ্রন্থাগারটিকে "সবচেয়ে খারাপ" হিসাবে চিহ্নিত করা উচিত নয়।
দেবোজ্যোতি ঘোষ

রিসেটের মূল উদ্দেশ্যগুলির মধ্যে একটি হ'ল ব্রাউজার প্রয়োগ হওয়া স্টাইলগুলি থেকে উদ্ভূত সমস্যাগুলি মোকাবেলা করা যা খুব দরকারী। আমি এটিও মনে করি এটি একটি গ্রন্থাগার হিসাবে বিবেচনা করা উচিত নয়।
ইসহাক পাক

@gdebojyoti এখানে কিছু ব্যবহারের কেস রয়েছে তবে আমি খুব কমই চাই যে সমস্ত ফটোগুলি শৈলী নির্বিশেষে আমার শিরোনামগুলি একই আকার হোক।
জেমস বেনঞ্জার

5

ঠিক আছে এর বর্ণনা থেকে মনে হচ্ছে এটি রিসেট হিসাবে সমস্ত ডিফল্ট স্টাইলিং বাদ দেওয়ার পরিবর্তে সমস্ত ব্রাউজারে ব্যবহারকারী এজেন্টের ডিফল্ট স্টাইলকে সামঞ্জস্য করার চেষ্টা করে।

অনেকগুলি সিএসএস রিসেটের বিপরীতে দরকারী ডিফল্ট সংরক্ষণ করে।


তাহলে রিসেটের উপর দিয়ে নরমালাইজ সিএসএস ব্যবহার করা ভাল?
জিতেন্দ্র ব্যাস

3
@ জিতেন্দ্র ব্যাস - না। সরঞ্জামগুলি পৃথক, একে অপরের থেকে ভাল বা খারাপ নয়। আপনার সেরা সমস্যার সমাধান করতে সহায়তা করে এমন একটি চয়ন করুন।
কোয়ান্টিন

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

5

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


এটি ব্যবহারের ক্ষেত্রে 99% ওভারকিল।
মাইকেল

@ মিশেল কোনটি? পুনরায় সেট করুন বা স্বাভাবিক করুন? (কেবল
ব্রেইন

1
@ ব্রেন পুনরায় সেট করুন এবং স্বাভাবিক করুন। প্রতিটি উপাদানের জন্য ডিফল্ট সিএসএস মানগুলি জানা ভাল ফ্রন্ট এন্ড বিকাশকারী হওয়ার অংশ। আমি তাদের দেখতে হিংস্র শক্তির পদ্ধতি হিসাবে দেখছি যা অপ্রয়োজনীয়।
মাইকেল

4
@ মিশেল> Knowing the default CSS values for each element is part of being a good front end developer- এটি আপনাকে প্রোগ্রামিং ভাষার পরিবর্তে ইলেক্ট্রন নিয়ে কাজ করার অনুরূপ, কারণ এটিই একজন ভাল বিকাশকারী তৈরি করে। সরঞ্জামগুলি দক্ষতার সাথে ব্যবহার করা কাউকে একজন ভাল বিকাশকারী হিসাবে তৈরি করে, অন্যভাবে প্রায়শই সময়
নিকোলাসউমিন

1

কখনও কখনও, সর্বোত্তম সমাধান উভয় ব্যবহার করা হয়। কখনও কখনও, এটি উভয়ই ব্যবহার করা হয়। এবং কখনও কখনও, এটি এক বা অন্য ব্যবহার করা হয়। আপনি যদি সমস্ত ব্রাউজার জুড়ে মার্জিন এবং প্যাডিং রিসেট সহ সমস্ত স্টাইল চান তবে রিসেট.এসএস ব্যবহার করুন। তারপরে সমস্ত সাজসজ্জা এবং স্টাইলিংগুলি নিজেই প্রয়োগ করুন। যদি আপনি কেবল অন্তর্নির্মিত স্টাইলিং পছন্দ করেন তবে আরও ক্রস ব্রাউজারের সিঙ্ক্রোনসিটি অর্থাৎ নরমালাইজেশন চান তবে নরমালাইজ সিএসএস ব্যবহার করুন। তবে আপনি যদি রিসেট.এসএস এবং নরমালাইজ.এসএসএস উভয়ই বেছে বেছে বেছে বেছে থাকেন তবে প্রথমে রিসেট.এসএস স্টাইলশীটটি এবং তারপরে নরমালাইজ.এসএসএস স্টাইলশীট (তত্ক্ষণিক) লিঙ্ক করুন। কখনও কখনও এটি সর্বদা যেটির চেয়ে ভাল তা নয় তবে কখন কোনটি কখন ব্যবহার করবেন কখন কোনটি বনাম উভয় ব্যবহার করবেন তা কখনই ভাল। এই প্রোগ্রামটিতে।


0

এই প্রশ্নের উত্তর ইতিমধ্যে বেশ কয়েকবার দেওয়া হয়েছে, আমি সেগুলির প্রত্যেকটির সংক্ষিপ্তসার করব, উদাহরণস্বরূপ এবং সেপ্টেম্বর 2019 এর অন্তর্দৃষ্টি:

  • নামটিকে সাধারণ হিসাবে চিহ্নিত করুন - এটি তাদের ব্যবহারকারী এজেন্টগুলির জন্য ব্রাউজারগুলিতে স্টাইলগুলি স্বাভাবিক করে তোলে, অর্থাত্ ডিফল্টর কারণে তারা কিছুটা পৃথক হওয়ার কারণে সমস্ত ব্রাউজারগুলিতে তাদের একই করে তোলে।

উদাহরণ : <h1>ট্যাগ ভিতরে <section>ডিফল্ট Google Chrome এর দ্বারা এর "প্রত্যাশিত" আকার চেয়ে ছোট করতে হবে <h1>ট্যাগ। অন্যদিকে মাইক্রোসফ্ট এজ <h1>ট্যাগটির "প্রত্যাশিত" আকার তৈরি করছে । Normalize.css এটিকে সামঞ্জস্য করবে।

বর্তমান স্থিতি : এনপিএম সংগ্রহস্থলটি দেখায় যে নরমালাইজ সিএসএস প্যাকেজটিতে বর্তমানে প্রতি সপ্তাহে 500k এরও বেশি ডাউনলোড রয়েছে। GitHub তারার সংগ্রহস্থলের প্রকল্প চেয়ে বেশি 36k হয়।

  • সিএসএস রিসেট করুন - নাম অনুসারে এটি সমস্ত স্টাইল পুনরায় সেট করে, অর্থাত্ এটি ব্রাউজারের সমস্ত ব্যবহারকারী এজেন্ট শৈলীগুলি সরিয়ে দেয়।

উদাহরণ : এটি নীচে এমন কিছু করবে:

html, body, div, span, ..., audio, video {  
   margin: 0;  
   padding: 0;  
   border: 0;  
   font-size: 100%;  
   font: inherit;  
   vertical-align: baseline; 
}

বর্তমান অবস্থা : এটি Normalize.css এর তুলনায় অনেক কম জনপ্রিয়, রিসেট-সিএসএস প্যাকেজটি দেখায় এটি প্রতি সপ্তাহে প্রায় 26 কে ডাউনলোড হয়। প্রকল্পের সংগ্রহস্থল থেকে এটি লক্ষ্য করা যায় বলে গিথহাব তারকারা মাত্র 200 জন ।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.