আপনি কোন HTML5 রিসেট CSS ব্যবহার করেন এবং কেন? [বন্ধ]


123

আপনি কোন HTML5 রিসেট CSS ব্যবহার করেন এবং কেন? আপনি কি আরও কেসগুলি আবরণ করতে পেয়েছেন?

আমি এইচটিএমএল 5 ডাক্তারের ব্যবহার শুরু করেছি: http://html5doctor.com/html-5-reset-stylesheet/ এটি কাজ করছে বলে মনে হচ্ছে, তবে আমি আরও ভাবছি যে সেখানে আরও ভাল কিছু আছে কিনা।



এটি হ্যাঁ অনুরূপ, তবে আমি পরবর্তী সময়ে এটির কাজটি করার জন্য কাউকে পরিবর্তনের পরিবর্তে কারও এলিস ব্যবহারের সন্ধান করছি, যদি প্রয়োজন হয় তবে আমি কেবল নতুন সংস্করণটি অনুলিপি করতে পারি।
ড্যারিল হেইন

20
D_N আমি বুঝতে পারি, তবে HTML5 এর সিএসএসে প্রভাব রয়েছে, বিশেষত একটি রিসেট সিএসএসে যেখানে আপনাকে এখন ন্যাভি বা অন্যদিকে যেমন অন্য ট্যাগ অন্তর্ভুক্ত করতে হবে।
ড্যারিল হেইন

উত্তর:


40

আসল আলাপ: মার্কডাউন সত্ত্বেও কাইকাই সঠিক, আপনার কেবল * প্যাডিং এবং মার্জিন 0 এ পুনরায় সেট করতে হবে।

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

এইচটিএমএল 5 রিসেট: (এটি খুব হস্তক্ষেপ করছে)

আমি কেবল http://html5reset.org/ এ একবার দেখেছি

img,
object,
embed {max-width: 100%;}

এবং:

html {overflow-y: scroll;}

আমি বুঝতে পারি এটির ভাল উদ্দেশ্য রয়েছে তবে এটি কোনও রিসেট শীটের কাজ নয়। এটি অনেক বেশি অনুমান করছে।

ব্লুপ্রিন্ট রিসেট: (আক্ষরিক একটি নীল ছাপ)

body {
  line-height: 1.5;
  background: white;
}

1.5.৫ সহ কী আছে। এবং ব্যাকগ্রাউন্ড সাদা কেন? (আমি জানি এটি সংশোধনের জন্য তবে এখনও প্রয়োজনীয় নয়)

সাধারণীকরণ.এসএস: (সাধারণ নয়)

https://github.com/necolas/normalize.css/blob/master/normalize.css

এটি কিছু ওয়েবকিট / অর্থাত্ হ্যাকস দিয়ে ভাল শুরু হয়েছিল

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.75em;
    margin: 2.33em 0;
}

প্রতিটি শিরোনাম ট্যাগ লক্ষ্যযুক্ত। এবং তারা শরীরের লাইন-উচ্চতা পুনরায় সেট করে না।

আমি নিশ্চিত যে উপরের সমস্তগুলি লক্ষ্যযুক্ত কাজটি ভালভাবে সম্পাদন করে তবে সম্ভবত প্রয়োজনের চেয়ে বেশি এড়ানো হবে।

এরিক মায়ার

Yui

HTML5Boilerplate

উপরেরগুলি বয়লারপ্লেটের পক্ষে পক্ষে (আরও বন্ধুত্বপূর্ণ) দিকে ঝুঁকে থাকা আমি জনপ্রিয়তার কারণে নিশ্চিত। এই মুহুর্তে আমার কাস্টমাইজড রিসেটের 80% বয়লারপ্লেট।

আমি তিনটি বিট বিড়াল হয়ে যেতে এবং নিজের তৈরি করতে যাচ্ছি, এটি রকেট বিজ্ঞান নয়।


2
নোট করুন যে এখনই নরমালাইজ.এসএস পরিবর্তিত হয়েছে; ফন্ট-আকারের শিরোনামগুলি আর সেট করা নেই।
রুবেন ভার্বার্গ

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

আমি 'এরিক মায়ার' ব্যবহার করি তবে এখন 'ওয়াইইউআই' রিসেট স্টাইল শিটটি ব্যবহার করি কারণ এটি: ডানিয়েলসোকলোভস্কি.ব্লগস্পট.সি.২০১২
ড্যানিয়েল

19

Normalize.css উভয় ডেস্কটপ এবং মোবাইল ব্রাউজারগুলির জন্য দুর্দান্ত এবং অনেক জনপ্রিয় এইচটিএমএল টেমপ্লেটগুলিতে ব্যবহৃত হয়।

কিন্তু কি সিএসএস ব্যবহার সম্পর্কে allসম্পত্তি যা ব্যতীত সিএসএস বৈশিষ্ট্য রিসেট directionএবং unicode-bidi? এইভাবে আপনার কোনও অতিরিক্ত ফাইল অন্তর্ভুক্ত করার দরকার নেই:

{
    all: unset
}

allআইএস / এজ ব্যতীত সিএসএসের বিস্তৃত সমর্থন রয়েছে। একইভাবে unset


আকর্ষণীয় তবে এটি কেবল ধীর সমাধান এবং এটি কেবল ফায়ারফক্সে সমর্থিত বলে মনে হয় এটির কোনও আসল ব্যবহার হয়নি (অন্তত এই সময়ে)।
tomasz86

সত্য যে কেবলমাত্র ফায়ারফক্স এটি এখনই সমর্থন করছে তবে আমি মনে করি যে এটি মডার্নিজারের মতো সমাধানগুলিতে শেষ হওয়ার ভাল সম্ভাবনা রয়েছে। github.com/Modernizr/Modernizr/issues/1219
ম্যাট স্মিথ

6

Reset.css দ্বারা ব্যবহৃত ব্লুপ্রিন্ট সিএসএস ফ্রেমওয়ার্ক ভাল কাজ করে এবং HTML5 উপাদান অন্তর্ভুক্ত করা হয়েছে। এটি তাদের স্ক্রিন.এসএস ফাইলে অন্তর্ভুক্ত হয়ে যায় ।

নতুন সাইটগুলির দ্রুত প্রোটোটাইপিংয়ের জন্য ব্লুপ্রিন্ট একটি দরকারী সংস্থান এবং এগুলির উত্স কোডটি সুসংহত এবং এর থেকে শেখার উপযুক্ত।


4

এরিক মায়ার তার সিএসএস রিসেটের ভি 2ও প্রকাশ করেছিলেন (এবং তিনি এখন প্রায় এক বছর আগে এটি করেছিলেন):

http://meyerweb.com/eric/tools/css/reset/


সাধারণ এখনও কার্যকর, এবং * সার্বজনীন নির্বাচকের উপর নির্ভর করে পুনরায় সেটগুলির চেয়ে দ্রুত।
tomasz86

3
  1. অনেকগুলি সিএসএস রিসেটের বিপরীতে দরকারী ডিফল্ট সংরক্ষণ করে।
  2. বিস্তৃত এইচটিএমএল উপাদানগুলির জন্য শৈলিকে সাধারণকরণ করে।
  3. বাগ এবং সাধারণ ব্রাউজারের অসঙ্গতিগুলি সংশোধন করে।
  4. সূক্ষ্ম উন্নতির সাথে ব্যবহারযোগ্যতা উন্নত করে।
  5. বিস্তারিত মন্তব্যগুলি ব্যবহার করে কোড কী করে তা ব্যাখ্যা করে।

normalize.css


2
* {
    margin: 0;
    padding: 0;
}

সহজ এখনও সম্পূর্ণ কার্যকর। সম্ভবত একটি মধ্যে নিক্ষেপ:

body {
    font-size: small;
}

ভাল পদক্ষেপের জন্য.


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

4
আমি একমত নই মার্জিন এবং প্যাডিং একমাত্র অনির্দেশ্য বৈশিষ্ট্য। ফন্ট-আকারের বৈশিষ্ট্যগুলি ব্রাউজারগুলি পড়ার জন্য নির্দিষ্টভাবে লক্ষ্যযুক্ত কীওয়ার্ড ব্যবহার করে, যা প্রতিটি বড় ব্রাউজারে ( বিকাশকারী.ইয়াহু / আইইউআই / উদাহরণস / ফন্টস / ফন্টসাইজ_সোর্স। Html ) জুড়ে YUI ফন্টের স্কেল কার্যকর করে । আমি কখনই উপাদানগুলির স্বাভাবিক প্রবাহকে চাপিয়ে দিতে চাই না এবং তাই আমি এইচটিএমএল 5 উপাদানগুলিকে একা রেখে দেব, কেবলমাত্র তাদের প্রদর্শনের ধরণ বা প্রয়োজন অনুযায়ী অবস্থান পরিবর্তন করব। আমি বুঝতে পারি যে আমার পছন্দটি অপ্রিয়, তবে এটি অন্যান্য সমাধানের চেয়ে অনেক বেশি মার্জিত এবং এটি কার্যকর।
কাইকাই

3
না না না না না! এইচটিএমএল 5 উপাদানগুলির ডিসপ্লে সম্পত্তি সেট থাকে না, তাই তারা মনোযোগ দিয়ে ডিফল্টে ফিরে যায় display: inline। আপনি কি কখনও কোনও সাইট চিত্রটি দেখেছেন যেখানে শিরোনাম, পাদলেখ, নেভিগেশন, সাইড কলাম, কার্যত প্রতিটি পৃষ্ঠা বিভাগ ইনলাইন প্রবাহিত হচ্ছে ??? দুঃখিত কাইকাই, তবে এটা ঠিক গ্রহণযোগ্য নয়!
ফিলিপ দুপানোভিć

বাবু, আমি এমনকি কোনও HTML5 গুরুও (এখনও) নই এবং আমি জানি এটি সম্পূর্ণরূপে পুনরায় সেট করার সঠিক উপায় নয়।
আইসমানিন্ড

4
একেবারে বৈধ উত্তর। শুধুমাত্র অপূর্ণতা হতে পারে *নির্বাচকরা ধীর, আমি শুনেছি।
অ্যানটন স্ট্রগনফ

2

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

তবে , আমি এটি উত্পাদন করতে ব্যবহার করার পরামর্শ দিচ্ছি না। এটি ধারণার আরও প্রমাণ এবং একটি উদ্দেশ্য-পুনরায় সেট করার স্টাইলশিট হিসাবে পরিবেশন করার চেয়ে ইঙ্গিতগুলি দিতে আরও ভাল ব্যবহার করা যেতে পারে। এর আগে অন্য যে কোনও পরামর্শের চেয়ে ভাল পছন্দ হতে পারে।


0

আমি নরমালাইজ বা HTML5 ডক্টর থেকে রিসেট ব্যবহার করি এবং আমি যে প্রকল্পে কাজ করছি তার জন্য এটি পরিবর্তন করি al

বিটিডব্লিউ এটি কেবলমাত্র একটি রিসেট ব্যবহারের ধারণা যা কম বেশি স্ট্যান্ডার্ড হয়ে যায়।


আপনার কি কোনও অতিরিক্ত বিশদ আছে?
জেমস এ মোহলার

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

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