Holy grail (web design)
હોલી ગ્રેઇલ એ એક વેબ પેજ લેઆઉટ છે જેમાં ઘણા સમાન-ઊંચાઈ સ્તંભો છે જે સ્ટાઇલ શીટ્સ સાથે વ્યાખ્યાયિત કરવામાં આવે છે. તે સામાન્ય રીતે ઇચ્છિત અને અમલમાં મૂકવામાં આવે છે, પરંતુ ઘણા વર્ષો સુધી, ઉપલબ્ધ તકનીકો સાથે તેને અમલમાં મૂકી શકાય તેવી વિવિધ રીતોમાં તમામ ખામીઓ હતી. આ કારણે, શ્રેષ્ઠ અમલીકરણ શોધવાની સરખામણી પ્રપંચી હોલી ગ્રેઇલની શોધ સાથે કરવામાં આવી હતી. સી. એસ. એસ. અને એચ. ટી. એમ. એલ. ની મર્યાદાઓ, અર્થપૂર્ણ રીતે અર્થપૂર્ણ પૃષ્ઠોની ઇચ્છનીયતા કે જે શોધ એન્જિનમાં સારી રીતે સ્થાન ધરાવે છે, અને વિવિધ બ્રાઉઝર્સની ખામીઓ ઐતિહાસિક રીતે સંયુક્ત રીતે એવી પરિસ્થિતિ ઊભી કરે છે જેમાં આ પ્રકારનું લેઆઉટ બનાવવાની કોઈ રીત ન હતી જેને સંપૂર્ણપણે યોગ્ય ગણવામાં આવશે. અંતર્ગત તકનીકોએ યોગ્ય ઉકેલ પૂરો પાડ્યો ન હોવાથી, વેબ ડિઝાઇનરોએ મર્યાદાઓની આસપાસ કામ કરવાની વિવિધ રીતો શોધી કાઢી હતી. સામાન્ય ઉકેલોમાં પૃષ્ઠ માળખામાં ફેરફારો, ગ્રાફિક્સનો ઉમેરો, સ્ક્રિપ્ટિંગ અને સી. એસ. એસ. નો સર્જનાત્મક ઉપયોગનો સમાવેશ થાય છે. આ પદ્ધતિઓ અપૂર્ણ, અસુવિધાજનક હતી અને કેટલાક લોકો દ્વારા વેબ ધોરણો અને તેમના ઉદ્દેશનો દુરુપયોગ માનવામાં આવતો હતો. વધુ તાજેતરના વેબ ધોરણોએ આ લેઆઉટના અમલીકરણ માટે વધુ સંપૂર્ણ અને મજબૂત ઉકેલો પૂરા પાડ્યા છે. ખાસ કરીને, સી. એસ. એસ. ફ્લેક્સિબલ બોક્સ લેઆઉટ અને સી. એસ. એસ. ગ્રીડ લેઆઉટ મોડ્યુલો બંનેએ સંપૂર્ણ ઉકેલો પૂરા પાડ્યા છે. સમસ્યા ઘણા વેબ પૃષ્ઠોને બહુવિધ (ઘણીવાર ત્રણ) સ્તંભો સાથે લેઆઉટની જરૂર પડે છે, જેમાં મુખ્ય પૃષ્ઠની સામગ્રી એક સ્તંભમાં (ઘણીવાર કેન્દ્રમાં) હોય છે, અને પૂરક સામગ્રી જેવી કે મેનુઓ અને અન્ય સ્તંભોમાં જાહેરાતો (સાઇડબાર) હોય છે. આ સ્તંભોને સામાન્ય રીતે તેમની વચ્ચેની સરહદો સાથે અલગ પૃષ્ઠભૂમિની જરૂર પડે છે, અને તે સમાન ઊંચાઈની દેખાતી હોવી જોઈએ, પછી ભલે તે સ્તંભમાં સૌથી ઊંચી સામગ્રી હોય. એક સામાન્ય જરૂરિયાત એ છે કે સાઇડબારની નિશ્ચિત પહોળાઈ હોય છે, જેમાં મધ્ય સ્તંભ બારી (પ્રવાહી અથવા પ્રવાહી લેઆઉટ) ભરવા માટે કદમાં સમાયોજિત થાય છે. બીજી સામાન્ય જરૂરિયાત એ છે કે, જ્યારે કોઈ પૃષ્ઠમાં સ્ક્રીન ભરવા માટે પૂરતી સામગ્રી ન હોય, ત્યારે ફૂટર નીચે ખાલી જગ્યા છોડવાને બદલે બ્રાઉઝર વિંડોની નીચે આવવું જોઈએ. આ હાંસલ કરવામાં ઘણા અવરોધો હતાઃ સી. એસ. એસ., સ્ટાઇલ માટે ખૂબ ઉપયોગી હોવા છતાં, પૃષ્ઠ લેઆઉટ માટે મર્યાદિત ક્ષમતાઓ હતી. બ્લોક ઘટકોની ઊંચાઈ (જેમ કે ડિવ ઘટકો) સામાન્ય રીતે તેમની સામગ્રી દ્વારા નક્કી કરવામાં આવે છે. તેથી બે વિભાગો, સાથે સાથે, વિવિધ માત્રામાં સામગ્રી સાથે, તેમની ઊંચાઈ અલગ અલગ હશે સિવાય કે તેમની ઊંચાઈ કોઈક રીતે યોગ્ય મૂલ્ય પર સેટ કરવામાં આવે. એચ. ટી. એમ. એલ. નો અર્થ અર્થપૂર્ણ રીતે ઉપયોગ કરવા માટે છે; એચ. ટી. એમ. એલ. ઘટકો પસંદ કરવા જોઈએ જે તેમની સામગ્રીનું સચોટ વર્ણન કરે. વપરાશકર્તા એજન્ટ દ્વારા પ્રસ્તુત વેબ પૃષ્ઠનો દેખાવ શૈલીના નિયમો દ્વારા સ્વતંત્ર રીતે નક્કી થવો જોઈએ. ઘણા અમલીકરણ બિન-કોષ્ટક સામગ્રી માટે કોષ્ટકોનો ઉપયોગ કરીને અથવા સિમેન્ટીક હેતુ વિના બહુવિધ ડિવ તત્વોને ગોઠવીને એચટીએમએલનો દુરુપયોગ કરે છે. એચ. ટી. એમ. એલ. નો બિન-અર્થપૂર્ણ ઉપયોગ વપરાશકર્તાઓ અથવા વપરાશકર્તા એજન્ટોને મૂંઝવણમાં મૂકે છે જેઓ પૃષ્ઠની સામગ્રીની રચનાને સમજવાનો પ્રયાસ કરી રહ્યા છે, અને તે સુલભતાનો મુદ્દો છે. જેમ કે સર્ચ એન્જિનો વેબ પૃષ્ઠના સ્રોત કોડની શરૂઆતમાં સામગ્રીને વધુ સુસંગત ગણી શકે છે, અને જ્યારે સ્ક્રીન રીડર્સ જેવા કેટલાક વપરાશકર્તા એજન્ટો દ્વારા જોવામાં આવે છે ત્યારે સામગ્રીને સ્રોત કોડ ક્રમમાં વાંચવામાં આવે છે, વેબ ડિઝાઇનરો પૃષ્ઠના દેખાવને અસર કર્યા વિના, મનસ્વી ક્રમમાં પૃષ્ઠ સ્રોતમાં સામગ્રી મૂકવાની ક્ષમતા ઇચ્છે છે. જુદા જુદા બ્રાઉઝર્સ દ્વારા સામગ્રીના ખોટા રેન્ડરિંગને કારણે, ધોરણો-સુસંગત બ્રાઉઝરમાં કામ કરતી પદ્ધતિ એવા બ્રાઉઝરમાં કામ ન કરી શકે જે CSS ને યોગ્ય રીતે અમલમાં મૂકતી નથી. જાણીતા ઉકેલો કોષ્ટકો સી. એસ. એસ. ના વ્યાપક અમલીકરણ પહેલાં, ડિઝાઇનરો સામાન્ય રીતે પૃષ્ઠો મૂકવા માટે કોષ્ટકોનો ઉપયોગ કરતા હતા. કેટલીકવાર તેઓ એકબીજાની અંદર અનેક કોષ્ટકો ગોઠવીને તેમની ઇચ્છિત રચના પ્રાપ્ત કરે છે. કોષ્ટક કોષોની અંદર સ્તંભોને મૂકવાથી સરળતાથી ઇચ્છિત દ્રશ્ય દેખાવ પ્રાપ્ત થાય છે, તેમ છતાં કોષ્ટકનો ઉપયોગ કરવો અર્થપૂર્ણ રીતે ખોટો છે, જો કે "ભૂમિકા" WAI-ARIA એચટીએમએલ લક્ષણને અર્થપૂર્ણ સંદર્ભને ફરીથી મેળવવા માટે "પ્રસ્તુતિ" પર સેટ કરી શકાય છે. પૃષ્ઠ સ્રોતમાં સ્તંભોના ક્રમને નિયંત્રિત કરવાની પણ કોઈ રીત નથી. પ્રદર્શન સાથેના વિભાગોઃ કોષ્ટક CSS પ્રદર્શન ગુણધર્મનો ઉપયોગ કરીને સ્તંભોને સમાન ઊંચાઈ બનાવવી શક્ય છે. આના માટે નેસ્ટેડ કન્ટેનર વિભાગોની જરૂર છે જે પ્રદર્શિત કરવા માટે સુયોજિત થયેલ છેઃ કોષ્ટક અને પ્રદર્શનઃ કોષ્ટક-પંક્તિ, અને સ્તંભો કે જે પ્રદર્શિત કરવા માટે સુયોજિત થયેલ છેઃ કોષ્ટક-કોષ. આ અર્થપૂર્ણ રીતે સાચું છે, કારણ કે માત્ર પ્રદર્શનને જ અસર થાય છે. જો કે, આ પદ્ધતિમાં સ્રોત કોડના ક્રમને નિયંત્રિત કરવાની ક્ષમતાનો અભાવ છે. તે ઇન્ટરનેટ એક્સપ્લોરર 7 જેવા કેટલાક જૂના, અસમર્થિત બ્રાઉઝર્સ સાથે પણ કામ કરશે નહીં. ખોટી કોલમ આ પદ્ધતિ પૃષ્ઠભૂમિ છબીનો ઉપયોગ કરે છે જે ત્રણેય કોલમનો પૃષ્ઠભૂમિ રંગ અને ઊભી કિનારીઓ પ્રદાન કરે છે. દરેક સ્તંભની સામગ્રી એક વિભાગમાં બંધ કરવામાં આવે છે, અને ફ્લોટ્સ, નકારાત્મક માર્જિન અને સંબંધિત સ્થિતિ જેવી તકનીકોનો ઉપયોગ કરીને તેની પૃષ્ઠભૂમિ પર મૂકવામાં આવે છે. પૃષ્ઠભૂમિ સામાન્ય રીતે માત્ર થોડા પિક્સેલ્સ ઊંચી હોય છે, અને "પુનરાવર્તન-વાય" લક્ષણનો ઉપયોગ કરીને પૃષ્ઠને આવરી લેવા માટે બનાવવામાં આવે છે. આ નિશ્ચિત-પહોળાઈ લેઆઉટ માટે સારું કામ કરે છે, અને ટકાવારી-આધારિત ચલ-પહોળાઈ પૃષ્ઠો માટે અનુકૂળ થઈ શકે છે, પરંતુ પ્રવાહી કેન્દ્ર પૃષ્ઠો માટે તેનો ઉપયોગ કરી શકાતો નથી. જાવાસ્ક્રિપ્ટ આ પદ્ધતિમાં, પૃષ્ઠ લોડ થયા પછી, સ્ક્રિપ્ટ દરેક સ્તંભની ઊંચાઈને માપે છે, અને દરેક સ્તંભની ઊંચાઈને વધુ મૂલ્ય પર સુયોજિત કરે છે. આ એવા બ્રાઉઝર્સમાં કામ કરશે નહીં જે જાવાસ્ક્રિપ્ટને ટેકો આપતા નથી, અથવા જાવાસ્ક્રિપ્ટ નિષ્ક્રિય કરેલ છે. નિશ્ચિત અથવા સંપૂર્ણ સ્થિતિ આ પદ્ધતિમાં, સ્તંભ વિભાગોના ખૂણાઓ પૃષ્ઠ પર ચોક્કસ જગ્યાએ બંધ કરવામાં આવે છે. આ સ્વીકાર્ય અથવા તો ઇચ્છિત પણ હોઈ શકે છે, પરંતુ હોલી ગ્રેઇલ સમસ્યાનું સમાધાન કરતું નથી કારણ કે તે નોંધપાત્ર રીતે અલગ લેઆઉટ છે. આ પદ્ધતિના પરિણામોમાં સ્ક્રીનના તળિયે સ્તંભોની નીચે દેખાતી સામગ્રી (જેમ કે ફૂટર), સ્તંભની સામગ્રી હેઠળ ખાલી જગ્યા અને તમામ સામગ્રીને જોવા માટે દરેક સ્તંભ માટે સ્ક્રોલબારની જરૂર પડી શકે છે. નેસ્ટેડ વિભાગો તેની પૃષ્ઠભૂમિ સાથેનો વિભાગ તેની સામગ્રીને સમાવવા માટે ઊંચાઈમાં વધશે. આ વર્તણૂકનો ઉપયોગ એકબીજાની અંદર ત્રણ વિભાગો બનાવીને સમસ્યાનું સમાધાન કરવા માટે થાય છે જે ત્રણ પૃષ્ઠભૂમિ પ્રદાન કરે છે. આ વિભાગોને સ્થિતિ તકનીકોનો ઉપયોગ કરીને તેમના યોગ્ય સ્થાન પર મૂકવામાં આવે છે, અને ત્રણ સામગ્રી વિભાગોને તેમની સંબંધિત પૃષ્ઠભૂમિ પર સ્થિત, સૌથી અંદરના પૃષ્ઠભૂમિ વિભાગમાં મૂકવામાં આવે છે. પૃષ્ઠભૂમિ વિભાગો પછી સૌથી ઊંચા સામગ્રી વિભાગ જેટલા ઊંચા બની જાય છે. આ પદ્ધતિની ખામીઓમાં ત્રણ બિન-સિમેન્ટીક વિભાગો અને આ જટિલ લેઆઉટના તત્વોને સ્થાન આપવાની મુશ્કેલીનો સમાવેશ થાય છે. સરહદી રંગ નેસ્ટેડ ડિવિઝન પદ્ધતિની એક સરળ આવૃત્તિમાં એક જ કન્ટેનર ડિવિઝનનો ઉપયોગ થાય છે. આ વિભાગના પૃષ્ઠભૂમિ ગુણધર્મો કેન્દ્ર સ્તંભની પૃષ્ઠભૂમિ પ્રદાન કરે છે, અને ડાબી અને જમણી સરહદો, જે બાજુ સ્તંભની પહોળાઈની બરાબર પહોળાઈ આપવામાં આવે છે, સાઇડબારના પૃષ્ઠભૂમિ રંગો પ્રદાન કરે છે. દરેક સ્તંભની સામગ્રી તેની પૃષ્ઠભૂમિ પર સ્થિત છે. આ પદ્ધતિ હજુ પણ એક બિન-સિમેન્ટીક વિભાગનો ઉપયોગ કરે છે, અને સાઇડબાર પર પૃષ્ઠભૂમિ છબીઓ અને સરહદો લાગુ કરવાનું મુશ્કેલ બનાવે છે. બોટમ પેડિંગ કોલમ કન્ટેનરના તળિયે મોટી માત્રામાં પેડિંગ મૂકીને, બેકગ્રાઉન્ડ કોલમ સામગ્રીની ઘણી નીચે સુધી વિસ્તરશે. અનુરૂપ નકારાત્મક માર્જિન સ્તંભોની નીચેની સામગ્રીને તેની યોગ્ય સ્થિતિમાં પાછા લાવશે. આ પદ્ધતિમાં સ્થાન નિર્ધારણ સરળ છે, કારણ કે સ્તંભની સામગ્રીના પાત્રમાં તેની પૃષ્ઠભૂમિ પણ હોય છે. 32767 પીએક્સનું પેડિંગ મૂલ્ય સૌથી મોટું છે જે તમામ આધુનિક બ્રાઉઝર્સ દ્વારા ઓળખવામાં આવશે. જો સ્તંભની ઊંચાઈમાં તફાવત આનાથી વધારે હોય, તો ટૂંકા સ્તંભની પૃષ્ઠભૂમિ સ્તંભને સંપૂર્ણપણે ભરી શકશે નહીં. વર્તમાન ઉકેલો CSS3 ધોરણો એવા મોડ્યુલો ધરાવે છે જે પૃષ્ઠ તત્વોને યોગ્ય રીતે ગોઠવી શકે છે. આમાંથી બે હોલી ગ્રેઇલ સમસ્યાને સંપૂર્ણપણે હલ કરે છે. જૂના બ્રાઉઝર્સમાં આ મોડ્યુલો માટે સપોર્ટનો અભાવ છે અથવા અન્યથા તેની ઉણપ છે. ઘણા ડિઝાઇનરો જૂના બ્રાઉઝર્સ માટે સુસંગત સ્ટાઇલ પ્રદાન કરતી વખતે આ મોડ્યુલો અમલમાં મૂકશે, જે નવા વાક્યરચના દ્વારા આધુનિક બ્રાઉઝર્સમાં ઓવરરાઇડ કરવામાં આવશે. 2020 માં જૂના બ્રાઉઝર્સ માટે સપોર્ટ ઓછો મહત્વનો બન્યો, જ્યારે વિન્ડોઝ 7 માટે વિસ્તૃત સપોર્ટ સમાપ્ત થયો, અને ઇન્ટરનેટ એક્સપ્લોરરનો ઉપયોગ ઓછો સામાન્ય બન્યો. સીએસએસ ફ્લેક્સિબલ બોક્સ લેઆઉટ (ફ્લેક્સબોક્સ) વર્લ્ડ વાઇડ વેબ કન્સોર્ટિયમ (ડબલ્યુ3સી) એ વિવિધ દરખાસ્તો દ્વારા લેઆઉટ મુદ્દાનો સંપર્ક કર્યો છે. સૌથી પરિપક્વ દરખાસ્ત ફ્લેક્સિબલ બોક્સ લેઆઉટ મોડ્યુલ (એ. કે. એ.) છે. ફ્લેક્સબોક્સ), જે નવેમ્બર 2018 સુધી ઉમેદવારની ભલામણની સ્થિતિમાં છે. તત્વના પ્રદર્શન ગુણધર્મને પ્રદર્શિત કરવા માટે સુયોજિત કરવુંઃ ફ્લેક્સ અથવા ડિસ્પ્લેઃ ઇનલાઇન-ફ્લેક્સ બાળકની વસ્તુઓને સ્થાન આપવાની નવી પદ્ધતિઓ સાથે તત્વને નવા પ્રકારનો કન્ટેનર (અનુક્રમે બ્લોક અથવા ઇનલાઇન બ્લોક જેવું) બનાવે છે. W3C દરખાસ્તમાં એક ઉદાહરણ છે જે ચાર સરળ CSS નિયમોનો ઉપયોગ કરીને હોલી ગ્રેઇલ કોલમ લેઆઉટને પ્રાપ્ત કરે છે, અને સરળ મીડિયા ક્વેરી નિયમ સાથે લેઆઉટને પ્રતિભાવ આપે છે. મોડ્યુલનો ઉપયોગ અન્ય ઘણા લેઆઉટ મુદ્દાઓને ઉકેલવા માટે પણ થઈ શકે છે. ફ્લેક્સિબલ બોક્સ લેઆઉટ મોડ્યુલ તમામ આધુનિક બ્રાઉઝર્સમાં સપોર્ટેડ છે, જોકે ઈન્ટરનેટ એક્સપ્લોરરના અમલીકરણમાં સમસ્યાઓ છે. સી. એસ. એસ. ગ્રીડ લેઆઉટ એ જ રીતે ગ્રીડ લેઆઉટ મોડ્યુલ ડિઝાઇનરને લેઆઉટ માટે કન્ટેનર બનાવવાની મંજૂરી આપે છે, જેમાં નિશ્ચિત અથવા ચલ કદની પંક્તિઓ અને સ્તંભો હોય છે જેમાં ઘટકો મૂકી શકાય છે. તે ડિસેમ્બર 2020 સુધી ઉમેદવારની ભલામણના દરજ્જામાં છે. તે તમામ આધુનિક બ્રાઉઝર્સમાં સપોર્ટેડ છે, જો કે ઇન્ટરનેટ એક્સપ્લોરરના અમલીકરણમાં સમસ્યાઓ છે. આ મોડ્યુલ ગ્રીડ પોઝિશનિંગ મોડ્યુલ, ટેમ્પલેટ લેઆઉટ મોડ્યુલ અને એડવાન્સ્ડ લેઆઉટ મોડ્યુલ તરીકે કરવામાં આવેલા અગાઉના કાર્યની સાતત્યતા છે. આ મોડ્યુલનું એક પાસું એ છે કે કન્ટેનરમાં અર્ધ-ગ્રાફિકલી રીતે ગ્રીડ સ્લોટ્સ બનાવવાની ક્ષમતા છે, જેને "ASCII કલા" તરીકે વર્ણવવામાં આવી છે, જેમ કે સ્થાનાંતરિત ટેમ્પલેટ લેઆઉટ મોડ્યુલમાં. તેમ છતાં ફ્લેક્સિબલ બોક્સ મોડ્યુલ 2-પરિમાણીય પૃષ્ઠ લેઆઉટ કરવા માટે સક્ષમ છે, તેનો હેતુ તત્વોને મુખ્યત્વે એક જ અક્ષ સાથે મૂકવાનો છે. ગ્રીડ લેઆઉટને જટિલ પૃષ્ઠો મૂકવા માટે પસંદ કરવામાં આવે છે, અને એવા પૃષ્ઠો કે જેમનો લેઆઉટ પ્રતિભાવશીલ ડિઝાઇનમાં ઘણો બદલાય છે. શુદ્ધ સી. એસ. એસ. નો ઉપયોગ કરતી પ્રથમ ત્રણ-સ્તંભની ફ્લેન્કિંગ ડિઝાઇન 2001 માં બ્લુરોબોટના રોબ ચંદનાઇસ દ્વારા સાઇટ wrongwaygoback.com માટે વિકસાવવામાં આવી હતી. તે સમયે નીલ ટેલ્બોટ જમણા હાથના સ્તંભની સ્થિતિ નક્કી કરવા માટે જાવાસ્ક્રિપ્ટનો ઉપયોગ કરી રહ્યા હતા. ચંદનાઇસ તેના બદલે શુદ્ધ સી. એસ. એસ. નો ઉપયોગ કરીને સ્થિતિ માટે એક ભવ્ય ઉકેલ સાથે આવ્યા અને ટૂંક સમયમાં જ Glish.com ના એરિક કોસ્ટેલો દ્વારા ધ હોલી ગ્રેઇલ તરીકે ડબ કરવામાં આવ્યા. ટેબલલેસ વેબ ડિઝાઇન રિસ્પોન્સિવ વેબ ડિઝાઇન સંદર્ભો કાસ્કેડિંગ સ્ટાઇલ શીટ્સ રિસ્પોન્સિવ વેબ ડિઝાઇન પણ જુઓ.