Holy grail (web design)
হলি গ্রেইল হল একটি ওয়েব পেজের বিন্যাস যেখানে একাধিক সমান-উচ্চতার কলাম রয়েছে যা স্টাইল শিট দিয়ে সংজ্ঞায়িত করা হয়েছে। এটি সাধারণত কাঙ্ক্ষিত এবং বাস্তবায়িত হয়, তবে বহু বছর ধরে, উপলব্ধ প্রযুক্তির সাহায্যে এটি বাস্তবায়িত করার বিভিন্ন উপায়ে সমস্ত ত্রুটি ছিল। এই কারণে, একটি সর্বোত্তম বাস্তবায়নের সন্ধানকে অধরা হোলি গ্রেইল অনুসন্ধানের সাথে তুলনা করা হয়েছিল। সিএসএস এবং এইচটিএমএল-এর সীমাবদ্ধতা, সার্চ ইঞ্জিনগুলিতে ভাল স্থান পাওয়া শব্দার্থগতভাবে অর্থপূর্ণ পৃষ্ঠাগুলির আকাঙ্ক্ষা এবং বিভিন্ন ব্রাউজারের ঘাটতিগুলি ঐতিহাসিকভাবে একত্রিত হয়ে এমন একটি পরিস্থিতি তৈরি করে যেখানে এই ধরনের বিন্যাস তৈরি করার কোনও উপায় ছিল না যা সম্পূর্ণ সঠিক বলে বিবেচিত হবে। যেহেতু অন্তর্নিহিত প্রযুক্তিগুলি সঠিক সমাধান প্রদান করেনি, তাই ওয়েব ডিজাইনাররা সীমাবদ্ধতার চারপাশে কাজ করার বিভিন্ন উপায় খুঁজে পেয়েছেন। সাধারণ সমাধানগুলির মধ্যে রয়েছে পৃষ্ঠার কাঠামোর পরিবর্তন, গ্রাফিক্সের সংযোজন, স্ক্রিপ্টিং এবং সিএসএস-এর সৃজনশীল ব্যবহার। এই পদ্ধতিগুলি অসম্পূর্ণ, অসুবিধাজনক ছিল এবং কেউ কেউ ওয়েব মান এবং তাদের অভিপ্রায়ের অপব্যবহার হিসাবে বিবেচনা করেছিলেন। আরও সাম্প্রতিক ওয়েব মানগুলি এই বিন্যাস বাস্তবায়নের জন্য অনেক বেশি সম্পূর্ণ এবং শক্তিশালী সমাধান প্রদান করেছে। বিশেষ করে, সিএসএস ফ্লেক্সিবল বক্স লেআউট এবং সিএসএস গ্রিড লেআউট মডিউল উভয়ই সম্পূর্ণ সমাধান প্রদান করেছে। সমস্যা অনেক ওয়েব পেজে একাধিক (প্রায়শই তিনটি) কলাম সহ একটি বিন্যাসের প্রয়োজন হয়, একটি কলামে প্রধান পৃষ্ঠার বিষয়বস্তু (প্রায়শই মাঝখানে) এবং অন্যান্য কলামে (সাইডবার) মেনু এবং বিজ্ঞাপনের মতো সম্পূরক সামগ্রী থাকে। এই কলামগুলির সাধারণত পৃথক পটভূমির প্রয়োজন হয়, তাদের মধ্যে সীমানা সহ, এবং যে কলামেই সবচেয়ে লম্বা বিষয়বস্তু থাকুক না কেন, একই উচ্চতা বলে মনে হওয়া উচিত। একটি সাধারণ প্রয়োজনীয়তা হল সাইডবারগুলির একটি নির্দিষ্ট প্রস্থ থাকে, যার মধ্যে কেন্দ্রের কলামটি উইন্ডো (তরল বা তরল বিন্যাস) পূরণ করার জন্য আকারে সামঞ্জস্য করা হয়। আরেকটি সাধারণ প্রয়োজনীয়তা হল, যখন কোনও পৃষ্ঠায় পর্দা পূরণ করার মতো পর্যাপ্ত বিষয়বস্তু থাকে না, তখন পাদচরণটি নীচে ফাঁকা জায়গা না রেখে ব্রাউজার উইন্ডোর নীচে নামতে হবে। এটি সম্পাদন করতে অনেক বাধা ছিলঃ সিএসএস, যদিও স্টাইলিংয়ের জন্য বেশ কার্যকর, পৃষ্ঠা বিন্যাসের জন্য সীমিত ক্ষমতা ছিল। ব্লক উপাদানগুলির উচ্চতা (যেমন ডিভ উপাদান) সাধারণত তাদের বিষয়বস্তু দ্বারা নির্ধারিত হয়। সুতরাং দুটি বিভাগ, পাশাপাশি, বিভিন্ন পরিমাণে বিষয়বস্তু সহ, বিভিন্ন উচ্চতা থাকবে যদি না তাদের উচ্চতা কোনওভাবে উপযুক্ত মান নির্ধারণ করা হয়। এইচ. টি. এম. এল শব্দার্থগতভাবে ব্যবহার করার জন্য; এইচ. টি. এম. এল উপাদানগুলি বেছে নেওয়া উচিত যা তাদের বিষয়বস্তু সঠিকভাবে বর্ণনা করে। একজন ব্যবহারকারী প্রতিনিধি দ্বারা উপস্থাপিত একটি ওয়েব পেজের উপস্থিতি স্টাইলের নিয়ম দ্বারা স্বাধীনভাবে নির্ধারণ করা উচিত। অনেক বাস্তবায়ন অ-ট্যাবুলার বিষয়বস্তুর জন্য টেবিল ব্যবহার করে এইচটিএমএল-এর অপব্যবহার করে, অথবা শব্দার্থিক উদ্দেশ্য ছাড়াই একাধিক ডিভ উপাদানের বাসা বাঁধে। এইচ. টি. এম. এল-এর অ-শব্দার্থিক ব্যবহার ব্যবহারকারী বা ব্যবহারকারী এজেন্টদের বিভ্রান্ত করে যারা পৃষ্ঠার বিষয়বস্তুর কাঠামো বোঝার চেষ্টা করছে এবং এটি একটি অ্যাক্সেসিবিলিটি সমস্যা। যেহেতু সার্চ ইঞ্জিনগুলি কোনও ওয়েব পেজের সোর্স কোডের শুরুতে বিষয়বস্তু আরও প্রাসঙ্গিক বলে বিবেচনা করতে পারে এবং স্ক্রিন রিডারদের মতো কিছু ব্যবহারকারী এজেন্টের দ্বারা দেখার সময় বিষয়বস্তু সোর্স কোড ক্রমে পড়া হয়, ওয়েব ডিজাইনাররা পৃষ্ঠার চেহারা প্রভাবিত না করে একটি নির্বিচারে ক্রমে পৃষ্ঠার উৎসে বিষয়বস্তু রাখার ক্ষমতা চান। বিভিন্ন ব্রাউজার দ্বারা বিষয়বস্তুর ভুল রেন্ডারিংয়ের কারণে, একটি মান-সঙ্গতিপূর্ণ ব্রাউজারে কাজ করে এমন একটি পদ্ধতি এমন একটিতে কাজ নাও করতে পারে যা সঠিকভাবে সিএসএস প্রয়োগ করে না। পরিচিত সমাধান টেবিল সিএসএস-এর ব্যাপক বাস্তবায়নের আগে, ডিজাইনাররা সাধারণত পৃষ্ঠাগুলি সাজানোর জন্য টেবিল ব্যবহার করতেন। কখনও কখনও তারা একে অপরের ভিতরে বেশ কয়েকটি টেবিল বসিয়ে তাদের কাঙ্ক্ষিত বিন্যাস অর্জন করে। যদিও টেবিল কোষের ভিতরে কলামগুলি স্থাপন করা সহজেই কাঙ্ক্ষিত চাক্ষুষ চেহারা অর্জন করে, একটি টেবিল ব্যবহার করা শব্দার্থগতভাবে ভুল, যদিও শব্দার্থিক প্রসঙ্গ পুনরুদ্ধারের জন্য "ভূমিকা" ওয়াই-আরিয়া এইচটিএমএল বৈশিষ্ট্যটি "উপস্থাপনা"-তে সেট করা যেতে পারে। পৃষ্ঠার উৎসে কলামগুলির ক্রম নিয়ন্ত্রণ করার কোনও উপায় নেই। প্রদর্শন সহ বিভাগঃ টেবিল সিএসএস প্রদর্শন বৈশিষ্ট্য ব্যবহার করে কলামগুলি সমান উচ্চতা তৈরি করা সম্ভব। এর জন্য নেস্টেড ধারক বিভাগগুলির প্রয়োজন যা প্রদর্শনের জন্য সেট করা থাকেঃ টেবিল এবং প্রদর্শনঃ টেবিল-সারি, এবং প্রদর্শনের জন্য সেট করা কলামগুলিঃ টেবিল-সেল। এটি শব্দার্থগতভাবে সঠিক, কারণ শুধুমাত্র প্রদর্শন প্রভাবিত হয়। তবে, এই পদ্ধতিতে সোর্স কোডের ক্রম নিয়ন্ত্রণ করার ক্ষমতার অভাব রয়েছে। এটি ইন্টারনেট এক্সপ্লোরার 7-এর মতো কিছু পুরনো, অসমর্থিত ব্রাউজারের সঙ্গেও কাজ করবে না। নকল কলাম এই পদ্ধতিতে একটি পটভূমি চিত্র ব্যবহার করা হয় যা তিনটি কলামের পটভূমির রঙ এবং উল্লম্ব সীমানা প্রদান করে। প্রতিটি কলামের বিষয়বস্তু একটি বিভাগে আবদ্ধ থাকে এবং ফ্লোট, নেতিবাচক মার্জিন এবং আপেক্ষিক অবস্থানের মতো কৌশল ব্যবহার করে এর পটভূমিতে স্থাপন করা হয়। পটভূমি সাধারণত মাত্র কয়েক পিক্সেল উঁচু হয় এবং "রিপিট-ওয়াই" বৈশিষ্ট্য ব্যবহার করে পৃষ্ঠাটি ঢেকে রাখার জন্য তৈরি করা হয়। এটি নির্দিষ্ট-প্রস্থ বিন্যাসের জন্য ভাল কাজ করে এবং শতাংশ-ভিত্তিক পরিবর্তনশীল-প্রস্থ পৃষ্ঠাগুলির জন্য অভিযোজিত হতে পারে, তবে তরল কেন্দ্রের পৃষ্ঠাগুলির জন্য ব্যবহার করা যায় না। জাভাস্ক্রিপ্ট এই পদ্ধতিতে, পৃষ্ঠা লোড হওয়ার পরে, একটি স্ক্রিপ্ট প্রতিটি কলামের উচ্চতা পরিমাপ করে এবং প্রতিটি কলামের উচ্চতা বৃহত্তর মান নির্ধারণ করে। এটি এমন ব্রাউজারগুলিতে কাজ করবে না যা জাভাস্ক্রিপ্ট সমর্থন করে না বা জাভাস্ক্রিপ্ট নিষ্ক্রিয় করেছে। স্থির বা নিখুঁত অবস্থান এই পদ্ধতিতে, কলাম বিভাগের কোণগুলি পৃষ্ঠার একটি নির্দিষ্ট জায়গায় লক করা থাকে। এটি গ্রহণযোগ্য বা এমনকি কাঙ্ক্ষিতও হতে পারে, তবে হোলি গ্রেইল সমস্যার সমাধান করে না কারণ এটি একটি উল্লেখযোগ্যভাবে ভিন্ন বিন্যাস। এই পদ্ধতির পরিণতির মধ্যে পর্দার নীচে কলামের নীচে প্রদর্শিত বিষয়বস্তু (যেমন একটি পাদচরণ), কলামের বিষয়বস্তুর নীচে ফাঁকা জায়গা এবং সমস্ত বিষয়বস্তু দেখার জন্য প্রতিটি কলামের জন্য স্ক্রোলবারের প্রয়োজন হতে পারে। নেস্টেড বিভাগগুলি তার পটভূমি সহ একটি বিভাগ তার বিষয়বস্তু ধারণ করার জন্য উচ্চতায় বৃদ্ধি পাবে। এই আচরণটি একে অপরের ভিতরে তিনটি বিভাগ তৈরি করে সমস্যা সমাধানের জন্য ব্যবহৃত হয় যা তিনটি পটভূমি সরবরাহ করে। এই বিভাগগুলি অবস্থান কৌশল ব্যবহার করে তাদের সঠিক অবস্থানে স্থাপন করা হয় এবং তিনটি বিষয়বস্তু বিভাগ তাদের নিজ নিজ পটভূমির উপর অবস্থিত, অভ্যন্তরীণ পটভূমি বিভাগের ভিতরে স্থাপন করা হয়। পটভূমি বিভাগগুলি তখন সবচেয়ে লম্বা বিষয়বস্তু বিভাগের মতো লম্বা হয়ে ওঠে। এই পদ্ধতির অসুবিধাগুলির মধ্যে রয়েছে তিনটি অ-শব্দার্থিক বিভাগ এবং এই জটিল বিন্যাসের উপাদানগুলির অবস্থান নির্ধারণের অসুবিধা। সীমানার রঙ নেস্টেড বিভাজন পদ্ধতির একটি সহজ সংস্করণ একটি একক ধারক বিভাগ ব্যবহার করে। এই বিভাগের পটভূমির বৈশিষ্ট্যগুলি কেন্দ্রের কলামের পটভূমি সরবরাহ করে এবং বাম এবং ডান সীমানা, যা পাশের কলামের প্রস্থের সমান প্রস্থ দেওয়া হয়, সাইডবারের পটভূমির রঙ সরবরাহ করে। প্রতিটি কলামের বিষয়বস্তু তার পটভূমির উপর স্থাপন করা হয়। এই পদ্ধতিটি এখনও একটি অ-শব্দার্থিক বিভাগ ব্যবহার করে এবং সাইডবারে পটভূমি চিত্র এবং সীমানা প্রয়োগ করা কঠিন করে তোলে। নীচের প্যাডিং কলামের পাত্রের নীচে প্রচুর পরিমাণে প্যাডিং স্থাপন করে, পটভূমি কলামের বিষয়বস্তুর অনেক নিচে প্রসারিত হবে। একটি সংশ্লিষ্ট ঋণাত্মক ব্যবধান কলামের নীচের বিষয়বস্তুটিকে তার সঠিক অবস্থানে ফিরিয়ে আনবে। এই পদ্ধতিতে অবস্থান করা সহজ, কারণ একটি কলামের বিষয়বস্তুর পাত্রে তার পটভূমিও থাকে। 32767পিএক্স-এর একটি প্যাডিং মান হল সবচেয়ে বড় যা সমস্ত আধুনিক ব্রাউজার দ্বারা স্বীকৃত হবে। কলামের উচ্চতার পার্থক্য যদি এর চেয়ে বেশি হয়, তবে ছোট কলামের পটভূমি সম্পূর্ণভাবে কলামটি পূরণ করবে না। বর্তমান সমাধান সিএসএস3 মানগুলিতে এমন মডিউল রয়েছে যা সঠিকভাবে পৃষ্ঠার উপাদানগুলি স্থাপন করতে পারে। এর মধ্যে দুটি হোলি গ্রেইল সমস্যার সম্পূর্ণ সমাধান করে। পুরোনো ব্রাউজারগুলিতে এই মডিউলগুলির জন্য সমর্থনের অভাব বা অন্যথায় ঘাটতি রয়েছে। অনেক ডিজাইনার পুরনো ব্রাউজারের জন্য সামঞ্জস্যপূর্ণ স্টাইলিং প্রদান করার সময় এই মডিউলগুলি প্রয়োগ করবেন, যা নতুন সিনট্যাক্স দ্বারা আধুনিক ব্রাউজারে ওভাররাইড করা হবে। 2020 সালে পুরানো ব্রাউজারগুলির জন্য সমর্থন কম গুরুত্বপূর্ণ হয়ে ওঠে, যখন উইন্ডোজ 7-এর জন্য বর্ধিত সমর্থন শেষ হয় এবং ইন্টারনেট এক্সপ্লোরারের ব্যবহার কম সাধারণ হয়ে ওঠে। সিএসএস ফ্লেক্সিবল বক্স লেআউট (ফ্লেক্সবক্স) ওয়ার্ল্ড ওয়াইড ওয়েব কনসোর্টিয়াম (ডব্লিউ3সি) বিভিন্ন প্রস্তাবের মাধ্যমে বিন্যাসের বিষয়ে যোগাযোগ করেছে। সবচেয়ে পরিপক্ক প্রস্তাব হল ফ্লেক্সিবল বক্স লেআউট মডিউল (এ. কে. এ)। ফ্লেক্সবক্স), যা নভেম্বর 2018 পর্যন্ত প্রার্থী সুপারিশ স্থিতিতে রয়েছে। একটি উপাদানের প্রদর্শন বৈশিষ্ট্য প্রদর্শন করার জন্য সেট করাঃ ফ্লেক্স বা ডিসপ্লেঃ ইনলাইন-ফ্লেক্স উপাদানটিকে একটি নতুন ধরনের পাত্রে পরিণত করে (যথাক্রমে একটি ব্লক বা ইনলাইন ব্লকের মতো), শিশু বস্তুর অবস্থানের নতুন পদ্ধতি সহ। ডাব্লু3সি প্রস্তাবে একটি উদাহরণ রয়েছে যা চারটি সহজ সিএসএস নিয়ম ব্যবহার করে হোলি গ্রেইল কলাম বিন্যাস অর্জন করে এবং বিন্যাসটিকে একটি সহজ মিডিয়া প্রশ্ন নিয়মের সাথে প্রতিক্রিয়াশীল করে তোলে। মডিউলটি অন্যান্য অনেক বিন্যাস সমস্যা সমাধানের জন্যও ব্যবহার করা যেতে পারে। ফ্লেক্সিবল বক্স লেআউট মডিউলটি সমস্ত আধুনিক ব্রাউজারে সমর্থিত, যদিও ইন্টারনেট এক্সপ্লোরারের বাস্তবায়নে সমস্যা রয়েছে। সিএসএস গ্রিড বিন্যাস গ্রিড বিন্যাস মডিউল একইভাবে একজন ডিজাইনারকে বিন্যাসের জন্য একটি ধারক তৈরি করার অনুমতি দেয়, যার মধ্যে নির্দিষ্ট বা পরিবর্তনশীল আকারের সারি এবং কলাম থাকে যার মধ্যে উপাদানগুলি স্থাপন করা যেতে পারে। এটি 2020 সালের ডিসেম্বর পর্যন্ত প্রার্থী সুপারিশের মর্যাদায় রয়েছে। এটি সমস্ত আধুনিক ব্রাউজারে সমর্থিত, তবে ইন্টারনেট এক্সপ্লোরারের বাস্তবায়নে সমস্যা রয়েছে। এই মডিউলটি গ্রিড পজিশনিং মডিউল, টেমপ্লেট লেআউট মডিউল এবং অ্যাডভান্সড লেআউট মডিউল হিসাবে করা পূর্ববর্তী কাজের ধারাবাহিকতা। এই মডিউলটির একটি দিক হল একটি পাত্রে অর্ধ-গ্রাফিকভাবে গ্রিড স্লট তৈরি করার ক্ষমতা, যা "এ. এস. সি. আই. আই আর্ট" হিসাবে বর্ণনা করা হয়েছে, যেমনটি প্রতিস্থাপিত টেমপ্লেট লেআউট মডিউলে রয়েছে। যদিও নমনীয় বাক্স মডিউলটি দ্বিমাত্রিক পৃষ্ঠার বিন্যাস সম্পাদন করতে সক্ষম, তবে এর উদ্দেশ্য হল প্রাথমিকভাবে একটি অক্ষ বরাবর উপাদানগুলিকে স্থাপন করা। জটিল পৃষ্ঠাগুলি এবং পৃষ্ঠাগুলি যার বিন্যাস প্রতিক্রিয়াশীল নকশায় ব্যাপকভাবে পরিবর্তিত হয় তার জন্য গ্রিড বিন্যাস পছন্দ করা হয়। 2001 সালে ব্লুরোবটের রব চন্দনাইস wrongwaygoback.com সাইটের জন্য বিশুদ্ধ সিএসএস ব্যবহার করে প্রথম তিন-কলামের পার্শ্ব নকশা তৈরি করেছিলেন। সেই সময়ে নীল ট্যালবট ডান হাতের কলামের অবস্থান নির্ধারণ করতে জাভাস্ক্রিপ্ট ব্যবহার করছিলেন। চন্দনাইস পরিবর্তে বিশুদ্ধ সিএসএস ব্যবহার করে অবস্থানের জন্য একটি মার্জিত সমাধান নিয়ে এসেছিলেন এবং শীঘ্রই Glish.com এর এরিক কস্টেলো দ্বারা দ্য হোলি গ্রেইল ডাব করা হয়েছিল। আরও দেখুন টেবিললেস ওয়েব ডিজাইন রেসপন্সিভ ওয়েব ডিজাইন রেফারেন্স ক্যাসকেডিং স্টাইল শীট রেসপন্সিভ ওয়েব ডিজাইন