আমি কি প্রতিটি স্ক্রিন আকারের জন্য একটি বৃহত সিএসএস মিডিয়া ক্যোয়ারী ফাইলকে পৃথক ফাইলে বিভক্ত করব?

Question

আমি সমস্ত পর্দার আকারের জন্য সামগ্রী সরবরাহ করতে একটি প্রতিক্রিয়াশীল ডিজাইনের ওয়েবসাইটে কাজ করছি। আমার কাছে 5 টি পৃথক "পদক্ষেপ" এর জন্য মিডিয়া প্রশ্ন রয়েছে এবং সিএসএস ফাইলটি প্রায় 30 কেবি এর কাছাকাছি।

এটিকে আলাদা ফাইলে বিভক্ত করা এবং এগুলির মতো করে তুলতে আরও ভাল হবে:

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

বা আমি কি তাদের একটি সিএসএস ফাইলে রাখতে পারি?

আপডেট: আমি কেবল যুক্ত করতে চেয়েছিলাম, যে আমার প্রধান উদ্বেগ ক্রস ব্রাউজার / ডিভাইস পৃষ্ঠা খোলার / রেন্ডারিং গতি ছিল, উন্নয়নের স্বাচ্ছন্দ্য নয়।

Comments

কোন একক সিএসএস ফাইল নিতে এবং মিডিয়া ক্যোয়ারী দ্বারা পৃথক পৃথক একাধিক ফাইলগুলিতে বিভক্ত করার জন্য গ্রান্ট / ওয়েবপ্যাক / যে কোনও প্লাগইন বিদ্যমান রয়েছে? তারপরে আপনি যুক্তিযুক্তভাবে এক মনোলিথ ফাইল দ্বারা সাশ্রয়ী বিকাশের স্বাচ্ছন্দ্য এবং পৃথক ফাইলগুলির গতি অপ্টিমাইজেশন পেতে পারেন।

— কেভিন হুইলার

Answer 1

আমি মনে করি এটি আপনার বিকাশের পক্ষে সবচেয়ে সহজ কী এবং একটি পরিপাটি স্টাইলশীট রাখতে আপনাকে কী সাহায্য করে তার উপর এটি নির্ভর করে।

বিভাজনে আমি ভাবতে পারি এমন একমাত্র প্রকৃত ক্ষতি যা হ'ল এটি হ'ল কোনও উপাদানটির বৈশিষ্ট্যটি আপনার সমস্ত স্টাইলশিটে উপস্থিত হওয়া উচিত, এটির পরিবর্তনের জন্য আপনাকে 5 টি পৃথক ফাইল আপডেট করতে হবে (এটি এক জায়গায় পাশাপাশি পাশাপাশি প্রদর্শিত হবে)।

এই পোস্টের উত্তর অনুসারে, ব্রাউজারগুলি নির্বিশেষে সমস্ত স্টাইলশিট ডাউনলোড করবে, সুতরাং রেজোলিউশনে বিভক্ত হওয়া কোনও ব্যান্ডউইথ-সেভার নয়: /programming/16657159/when-used-media-queries-does-a -phone-লোড-অ প্রাসঙ্গিক-প্রশ্নের-এবং-চিত্র

Comments

আপনি যে পোস্টটিতে লিঙ্ক করেছেন, আপনি কি জানেন যে এটি "এটি সিএসএসএমের একটি সীমাবদ্ধতা" বলতে কী বোঝায়?

— অসন্তুষ্ট গোয়াট

সিএসএস অবজেক্ট মডেল - dev.w3.org/csswg/cssom - আমি বিশ্বাস করি এটি সিএসএস কীভাবে পরিচালনা করা উচিত তা সংজ্ঞায়িত করে, এবং তাই আমি মনে করি যে তিনি যে সীমাবদ্ধতাটি উল্লেখ করেছেন তাতে কোনও মডেল থাকবে না যা আরও বেশি ব্যান্ডউইথ-সাশ্রয়ে এই জাতীয় শৈলী পরিচালনা করে model উপায়।

— রিচার্ড বি

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

— aloreলোর

Answer 2

এটি আপনি যা অর্জন করতে চান তার উপর এটি সামান্য নির্ভর করে: আপনি কী আপনার পৃষ্ঠাটি দ্রুত লোড করার চেষ্টা করছেন বা আপনি উন্নয়নকে আরও সহজ করার চেষ্টা করছেন?

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

আপনি যদি সর্বোত্তম বেটের চেয়ে দ্রুত লোডিং পৃষ্ঠাটি চান তবে আপনার অনুরোধের পরিমাণ হ্রাস করা উচিত, যেহেতু একটি অনুরোধ ওভারহেড বেশ বড়। আরও আপনি নিজের জন্য বিকাশ সংস্করণ রাখতে পারেন এবং ওয়েবে একটি মিনিমাইজড সিএসএস পরিবেশন করতে পারেন (আমি YUI কে একটি ভাল পদ্ধতি বলে মনে করি: http://www.refresh-sf.com/yui/ )।

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

.bold-and-italic { font-weight: bold; text-style: italic; }

রূপান্তর করা যায়:

.bold { font-weight: bold; }
.italic { text-style: italic; }

কেবলমাত্র আপনাকে এইচটিএমএল থেকে কিছুটা পরিবর্তন করতে <span class="bold-and-italic">foo bar</span>হবে<span class="bold italic">foo bar</span>

আমি আপনাকে দৃ Boot়রূপে বুটস্ট্র্যাপ ( http://getbootstrap.com ) একবার দেখার পরামর্শ দিতে পারি, এই ছেলেরা একাধিক 'সাব-ক্লাসে' ক্লাস বিভক্ত করতে দুর্দান্ত কাজ করেছে।

আশা করি এটা কাজে লাগবে.

Comments

শৈলীর নাম অনুসারে ক্লাসগুলি খারাপ ফর্ম। আপনি যদি এটিতে যাচ্ছেন তবে কেবল একটি শৈলীর বৈশিষ্ট্য রেখে দিন। যুক্তিযুক্ত ক্লাসের নাম দেওয়া ভাল। পছন্দ.important

— aloreলোর

Answer 3

কেবলমাত্র একটি সিএসএস ফাইল থাকা ভাল, তবে এটিকে ছোট করা এবং জিপিপ করা ভাল। ধরে নিন আপনার 30 কেবি এটি করার আগে রয়েছে, আপনি সম্ভবত ফাইলটি মাইনিফিকেশন (সাদা স্থান অপসারণ) এবং গিজিপ সহ প্রায় 5 কেবিতে নামিয়ে আনবেন।

বিভাজন সম্ভবত আপনাকে আরও কিছু গতিবেগ পেতে পারে তবে কেবল কিছু শর্তে।

• আপনাকে নিশ্চিত করতে হবে যে প্রতিটি সময়ে কেবল একটি স্টাইলশিট লোড হয়েছে - অন্যথায় আপনার দু'বার বা আরও এইচটিটিপি অনুরোধের প্রয়োজন হবে, যার নিজের ওভারহেড রয়েছে, যা কমপক্ষে আংশিকভাবে ছোট ফাইলের আকার থেকে উপকারকে অস্বীকার করবে। এটি করার জন্য, কেবল স্টাইলশিটটি বিভক্ত করা এবং বিভিন্ন মিডিয়া বৈশিষ্ট্য সহ একাধিক- ট্যাগগুলি সন্নিবেশ করানো যথেষ্ট নয়<link> , ব্রাউজারগুলি <link>মিডিয়া প্রশ্নগুলি নির্বিশেষে সমস্ত এড স্টাইলশিট লোড করে বলে মনে হয় (এই তথ্যের জন্য @ সিমম্যাননকে ধন্যবাদ, এটি জানেন না) ।
• স্টাইল শিটগুলির মধ্যে ভাগ করা সিএসএস বিধিগুলির সংখ্যা অবশ্যই ছোট হতে হবে - অন্যথায় একাধিক স্টাইলশিটগুলির প্রতিটিতে সাধারণ প্রচলিত নিয়ম থাকতে হবে এবং এইভাবে মূলটির আকার প্রায় হবে।
• আপনি একটি সিএসএস প্রিপ্রোসেসর ব্যবহার করেন (বা অনুরূপ কিছু), সুতরাং 5 স্টাইলশিটে একই কোড টুকরা থাকা ম্যানেজ করা যায়।

এছাড়াও: অকালে অপ্টিমাইজ করবেন না। যদি আপনার পারফরম্যান্সের সমস্যা হয় তবে তা করুন।

Comments

এটি লক্ষণীয় যে আপনি যদি <link rel="stylesheet" />আপনার মিডিয়া ক্যোয়ারী সুনির্দিষ্ট ফাইলগুলির জন্য ট্যাগ ব্যবহার করেন তবে আপনি ব্রাউজারটি ডাউনলোড করতে বাধা দিতে পারবেন না। ভিউপোর্টের মাত্রা পরীক্ষা করতে এবং যথাযথ স্টাইল শিটগুলি ইনজেক্ট করতে আপনাকে সার্ভার সাইডে ব্রাউজার স্নিফিং বা জাভাস্ক্রিপ্ট ব্যবহার করতে হবে। এগুলির কোনওটিই পছন্দ নয়।

— cimmanon

আমি কিছুটা অবাক হয়েছি, তবে আপনি ঠিক বলেছেন - আমি ভেবেছিলাম মিডিয়া-অ্যাট্রিবিউটটি <link>-ট্যাগে যুক্ত করা হলে মেলানো নয় স্টাইলশিটগুলি লোড করা আটকাতে পারে। ব্রাউজারগুলি কেন এটি করে? স্টাইলশিটগুলি বিভক্ত না করার এটি অবশ্যই একমাত্র গুরুত্বপূর্ণ কারণ ।

— গত

তারা এটি করে কারণ আপনার স্ক্রিনটি পরিবর্তিত হতে পারে, আপনি যদি কোনও মোবাইলে থাকেন এবং আপনি যদি প্রতিকৃতি থেকে ল্যান্ডস্কেপ এ ঘোরান, হঠাৎ আপনার পর্দার প্রস্থ আলাদা হয়। বা ডেস্কটপে আপনি আপনার ব্রাউজার উইন্ডোটির আকার পরিবর্তন করতে পারেন, বা আপনার একাধিক মনিটর সেটআপ থাকলে আপনার উইন্ডোটিকে অন্য স্ক্রিনে টেনে আনতে পারেন। ব্রাউজার যদি সমস্ত সিএসএস সম্পদ আগাম ডাউনলোড না করে তবে উপরের কোনও ক্রিয়াকলাপ ঘটলে এবং যখন পৃষ্ঠাটি পুনরায় রেন্ডারিংয়ে বিলম্ব হবে

— মিঃ কেরোট

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

— aloreলোর

Answer 4

আপনার মিডিয়া প্রশ্নের উপর ভিত্তি করে আপনার সিএসএস ফাইলগুলি বিভক্ত করা উচিত কারণ সিএসএস ফাইলগুলি ব্লকিং রেন্ডার করছে।

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

এটি একটি জাভাস্ক্রিপ্ট স্ক্রিপ্ট ট্যাগে async যুক্ত করার জন্য যায়; প্রাক্তন .: <script src='myfile.js' async></script>।

ডিওএমকে আপনার জেএস ফাইলটি লোড হওয়ার জন্য অপেক্ষা করতে হবে না। কেবলমাত্র অ্যাসিঙ্ক যুক্ত করুন যদি আপনার ডিওএম নির্মাণের জন্য ওভারলোডে সেই কোনও জাভাস্ক্রিপ্টের প্রয়োজন হয় না।

Comments

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

— কেভিন হুইলার

Answer 5

আমি এটি বলতে ঝোঁক হবে।

উত্পাদনের জন্য, এগুলি সর্বদা একটি ফাইলে রাখুন; এটি ব্রাউজারের জন্য আরও দক্ষ হওয়ার কারণ এবং বিকাশ থেকে উত্পাদনে যাওয়ার সময় এটি আপনার প্রাথমিক আগ্রহ (আইএমও) হওয়া উচিত।

বিকাশ হ'ল মাছের আলাদা কেতলি। আমি মিডিয়া ক্যোয়ারিকে বিভক্ত করার প্রবণতা রাখি যাতে তারা যে কোনও উপাদান দ্বারা হয়, যেমন:

.foo { // .. some css }
.foo:hover, .foo:focus { // hover css }
@media screen and (max-width: 400px) {
    .foo { // .. some differentcss }
}

সাধারণত আমি যদি কোনও উপাদান পরিবর্তন করছি তবে সিএসএসের জন্য আমি পুরো জায়গা জুড়ে শিকার করতে চাই না (যদিও আপনি গ্রেপ ... এর মতো কিছু ব্যবহার করতে পারেন)।

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

Answer 6

সাধারণ: 1 টি স্টাইলশিট ব্যবহার করুন এবং সিএসএস শৈলীগুলি সন্ধান এবং পরিবর্তন করা সহজ করার জন্য কেবলমাত্র তাদের সাথে মন্তব্য যুক্ত করুন:

//sheet 1 (mobile device 800 px)
code

//sheet 2 (mobile device 768 px)
code

//sheet 3 (mobile device 480 px)
code

//sheet 4 (desktop size 1024 px)
code

আপনি যদি চান একাধিক স্টাইলশিট ব্যবহার করতে এবং প্রতিটি নির্দিষ্ট আকারের জন্য তাদের কল করতে পারেন।

Answer 7

আমি বরং বুটস্ট্র্যাপ তাকান । এটি 1 সিএসএস ফাইল যা সমস্ত সিএসএস ধারণ করে। এটি প্রায় 99% ব্রাউজারে কাজ করে এবং অত্যন্ত প্রতিক্রিয়াশীল।

লাইভ ডেমোতে একটি জুম ইন ( Ctrl += জুম ইন, Ctrl -= জুম আউট, Ctrl 0= সাধারণ) এ ক্লিক করুন বা এটি কীভাবে রেন্ডার হয় তা দেখতে আপনার মোবাইল এ খুলুন।

Comments

তিনি ইতিমধ্যে সিএসএসের 30 কেবি লিখেছেন, কীভাবে বুটস্ট্র্যাপে স্যুইচিং করা উপকারী হতে পারে?

— স্টিভ স্যান্ডার্স

এইভাবে রাখলে, হ্যাঁ আমি সম্মতি দিচ্ছি যে 30 কেবিএসএসএস হ'ল এটি আবার করা একটি মিশন। আমি কেবল এটি বিভিন্ন স্টাইলশিটে অনুলিপি করে আটকান, এটি কীভাবে কাঠামোগত হয় তার উপর নির্ভর করে আপনি সিএসএস ফাইলগুলির সদৃশ ও নাম পরিবর্তন করতে পারেন এবং সমস্ত অপ্রয়োজনীয় অংশগুলি সরিয়ে ফেলতে পারেন।

— ওগার্ডস মাইবার্গকে