CSS2 અને CSS3 વચ્ચેનો તફાવત

CSS3 માં મોટા ફેરફારોને સમજવું

CSS2 અને CSS3 વચ્ચેનો સૌથી મોટો તફાવત એ છે કે CSS3 મોડ્યુલો તરીકે ઓળખાય છે, તે વિવિધ વિભાગોમાં વિભાજિત કરવામાં આવ્યા છે. આ મોડ્યુલો દરેકને ભલામણ પ્રક્રિયાના વિવિધ તબક્કામાં W3C દ્વારા તેનો માર્ગ બનાવી રહ્યો છે. વિવિધ પ્રોડક્ટ્સ દ્વારા બ્રાઉઝરમાં CSS3 ના વિવિધ ટુકડાઓ માટે સ્વીકાર્ય અને અમલ કરવા માટે આ પ્રક્રિયણે તેને ઘણું સરળ બનાવ્યું છે.

જો તમે આ પ્રક્રિયાની સરખામણી સીએસએસ2 સાથે કરો છો, જ્યાં દરેક કેસ્કેડીંગ સ્ટાઈલ શીટ્સની માહિતીમાં એક જ દસ્તાવેજ તરીકે બધું જ રજૂ કરવામાં આવ્યું હતું, તો તમે ભલામણને નાના, વ્યક્તિગત ટુકડાઓમાં વિભાજીત કરવાના લાભો જોવાનું શરૂ કરો છો. કારણ કે દરેક મોડ્યુઝ વ્યક્તિગત રૂપે કામ કરી રહ્યું છે, અમારી પાસે CSS3 મોડ્યુલો માટે બ્રાઉઝર સૉર્ટની વિશાળ શ્રેણી છે.

કોઈપણ નવા અને બદલાયેલા સ્પષ્ટીકરણની જેમ, તમારા બ્રાઉઝર્સ અને ઑપરેટિંગ સિસ્ટમ્સમાં તમારા CSS3 પૃષ્ઠોને સંપૂર્ણ રીતે ચકાસવા માટે ખાતરી કરો. યાદ રાખો કે દરેક બ્રાઉઝરમાં વેબપેજ બરાબર જ દેખાય છે તેવું વેબપેજ બનાવવાનું નથી, પરંતુ તે ખાતરી કરવા માટે કે CSS3 શૈલીઓ સહિત તમે જે શૈલીનો ઉપયોગ કરો છો, તે બ્રાઉઝર્સમાં શ્રેષ્ઠ દેખાવ કરે છે અને તેમને જૂની બ્રાઉઝર્સ માટે પ્રભાવિત કરે છે. નથી.

નવી CSS3 પસંદગીકારો

CSS3 નવા રસ્તાઓનો એક નવી તક આપે છે કે જેમાં તમે નવા નિયમો, તેમજ નવા સંયોજકો, અને કેટલાક નવા સ્યુડો તત્વો સાથે સીએસએસ નિયમો લખી શકો છો.

ત્રણ નવા લક્ષણ પસંદગીકારો:

• એટ્રીબ્યુટ શરૂઆત બરાબર તત્વ સાથે મેળ ખાય છે [foo ^ = "bar"] આ ઘટકમાં "bar" દા.ત.
• એટ્રીબ્યુટનો અંત બરાબર તત્વ [foo $ = "bar"] સાથે મેળ ખાય છે એલિમેન્ટમાં "F" નામનું લક્ષણ છે જે "બાર" દા.ત.
• એટ્રીબ્યુટમાં મેચ ઘટક [foo * = "bar"] ધરાવે છે. તત્વમાં એફઇ નામની વિશેષતા ધરાવે છે જેમાં સ્ટ્રિંગ "બાર" દા.ત.

16 નવા સ્યુડો વર્ગો:

• : રુટ
  • દસ્તાવેજનું રુટ ઘટક. HTML માં આ હંમેશાં છે
• : nth-child (n)
  • આનો ઉપયોગ ચોક્કસ બાળ તત્વો સાથે મેળ કરવા અથવા વૈકલ્પિક મેચો મેળવવા માટે ચલોનો ઉપયોગ કરવા માટે કરો.
• : nth-last-child (n)
  • છેલ્લા એકથી ગણતરીમાં લેવાતી ચોક્કસ બાળ તત્વો મેળ ખાય છે.
• : nth-of-type (n)
  • ડોક્યુમેન્ટ ટ્રીમાં તે પહેલાં તેના જ નામ સાથે બહેન તત્વોને મેળ ખાવો.
• : nth-last-of-type (n)
  • એ જ નામ સાથે બહેન તત્વો સાથે મેળ ખાતા નીચેથી ગણતરી કરો.
• : છેલ્લા બાળક
  • માતાપિતાના છેલ્લા બાળ તત્વને મેળ ખાવો.
• : પ્રથમ-પ્રકાર
  • તે પ્રકારના પ્રથમ ભાઈ તત્વને મેળ ખાવો.
• : છેલ્લા પ્રકારના
  • તે પ્રકારના છેલ્લા બહેન તત્વને મેળ ખાવો.
• :માત્ર બાળક
  • તેના પિતાની એકમાત્ર બાળક તત્વ સાથે મેળ ખાય છે.
• : માત્ર ઓફ પ્રકાર
  • તત્વ સાથે મેળ ખાય છે જે તેના પ્રકારનો ફક્ત એક જ છે.
• : ખાલી
  • તત્વ સાથે મેળ ખાય છે જેમાં કોઈ બાળકો નથી (ટેક્સ્ટ નોડ્સ સહિત).
• : લક્ષ્ય
  • ઉલ્લેખિત URI નો લક્ષ્ય છે તે એક તત્વને મેળ ખાવો.
• : સક્રિય કરેલું
  • જ્યારે સક્ષમ હોય ત્યારે તત્વને મેચ કરો.
• : નિષ્ક્રિય
  • જ્યારે નિષ્ક્રિય થઈ જાય ત્યારે તત્વને મેચ કરો
• : ચકાસાયેલ
  • તત્વને ચકાસો ત્યારે ચકાસો (રેડીયો બટન અથવા ચેકબોક્સ).

• : નથી (ઓ)
  • મેળ જ્યારે તત્વ સરળ પસંદગીકાર ઓ સાથે મેળ ખાતી નથી

એક નવું સંયોજક:

• તત્વ A ~ elementB
  • તત્વ A પછી ક્યાંક તત્ત્વ અનુસરે છે ત્યારે મેળ ખાય છે, તાત્કાલિક જરૂરી નથી.

નવી ગુણધર્મો

CSS3 એ પણ ઘણા નવા CSS ગુણધર્મો રજૂ કર્યા છે. આમાંની ઘણી મિલકતો દ્રશ્ય શૈલીઓ બનાવતી હતી જે કદાચ ફોટોશોપ જેવા ગ્રાફિક્સ પ્રોગ્રામ સાથે વધારે સંલગ્ન હશે. તેમાંના કેટલાક, જો સરહદ-ત્રિજ્યા અથવા બૉક્સ-શેડો જેવા, તો CSS3 ની રજૂઆતની શરૂઆત થઈ છે. અન્યો, જેમ કે ફ્લેક્સબૉક્સ અથવા તો CSS ગ્રીડ નવી શૈલીઓ છે જે હજી ઘણીવાર CSS3 ઉમેરાઓને ગણવામાં આવે છે.

CSS3 માં, બૉક્સ મોડેલ બદલાયું નથી. પરંતુ તમારી શૈલીની બેકગ્રાઉન્ડ્સ અને કિનારીઓ શૈલીમાં તમને મદદ કરી શકે તેવી નવી સ્ટાઇલ પ્રોપર્ટીઝનો એક ટોળું છે.

બહુવિધ પૃષ્ઠભૂમિ હું mages

બેકગ્રાઉન્ડ-ઇમેજ, બેકગ્રાઉન્ડ-પોઝિશન અને બેકગ્રાઉન્ડ-પુનરાવર્તિત શૈલીઓનો ઉપયોગ કરીને તમે બૉક્સમાં એકબીજાને ઉપર સ્તરવાળી બહુવિધ પૃષ્ઠભૂમિ છબીઓને નિર્દિષ્ટ કરી શકો છો. પ્રથમ છબી એ વપરાશકર્તા માટે સૌથી નજીકનો સ્તર છે, જેની પાછળ પાછળની પેઇન્ટ્સ છે. જો ત્યાં પૃષ્ઠભૂમિ રંગ હોય, તો તે તમામ છબી સ્તરથી નીચે પેઇન્ટ કરવામાં આવે છે.

નવી પૃષ્ઠભૂમિ પ્રકાર ગુણધર્મો

CSS3 માં કેટલીક નવી પૃષ્ઠભૂમિ ગુણધર્મો પણ છે.

• પૃષ્ઠભૂમિ ક્લિપ
  • આ મિલકત વ્યાખ્યાયિત કરે છે કે પૃષ્ઠભૂમિ છબી કેવી રીતે ક્લિપ કરવી જોઈએ. ડિફોલ્ટ સીમા બૉક્સ છે, પરંતુ તેને પેડિંગ બોક્સ અથવા સામગ્રી બોક્સમાં બદલી શકાય છે.
• પૃષ્ઠભૂમિ મૂળ
  • આ ગુણધર્મ તે નક્કી કરે છે કે પૃષ્ઠભૂમિને ગાદી બૉક્સ, સરહદ બૉક્સ અથવા સામગ્રી બોક્સમાં સ્થાન હોવું જોઈએ.
• બેકગ્રાઉન્ડ કદ
  • આ ગુણધર્મ તમને પૃષ્ઠભૂમિ છબીના કદને સૂચવવા માટે પરવાનગી આપે છે. તે તમને પૃષ્ઠને ફિટ કરવા માટે નાની છબીઓને ખેંચવાની મંજૂરી આપે છે.

હાલની પૃષ્ઠભૂમિ પ્રકાર ગુણધર્મો ફેરફારો

હાલની પૃષ્ઠભૂમિ શૈલી ગુણધર્મોમાં કેટલાક ફેરફારો પણ છે:

• પૃષ્ઠભૂમિ પુનરાવર્તન
  • આ મિલકત માટે બે નવા મૂલ્યો છે: અવકાશ અને રાઉન્ડ જગ્યા ટાઇપ કરેલી છબીને ક્લિપ કર્યા વિના બોક્સની અંદર સમાનરૂપે છે. રાઉન્ડ પૃષ્ઠભૂમિ છબી rescales કે જેથી તે બૉક્સમાં સંપૂર્ણ સંખ્યાને ટાઇલ કરશે.
• પૃષ્ઠભૂમિ જોડાણ
  • એક નવું મૂલ્ય "સ્થાનિક" ઉમેરવામાં આવ્યું છે જેથી પૃષ્ઠભૂમિ તત્વની સામગ્રી સાથે સ્ક્રોલ કરશે જ્યારે તે તત્વ પાસે સ્ક્રોલ બાર હશે.
• પૃષ્ઠભૂમિ
  • પૃષ્ઠભૂમિ લહેરાઉંથ મિલકત કદ અને મૂળ ગુણધર્મોમાં ઉમેરે છે.

CSS3 બોર્ડર ગુણધર્મો

CSS3 સરહદોમાં આપણે જે સ્ટાઇલનો ઉપયોગ કરીએ છીએ (નક્કર, ડબલ, ડૅશ, વગેરે) હોઈ શકે છે અથવા તેઓ એક છબી હોઈ શકે છે. ઉપરાંત, CSS3 ગોળાકાર ખૂણા બનાવવા માટેની ક્ષમતામાં લાવે છે. બોર્ડરની છબીઓ રસપ્રદ છે કારણ કે તમે બધી ચાર સરહદોની છબી બનાવી અને પછી CSS ને તમારી સરહદો પર તે છબી કેવી રીતે લાગુ કરવી તે જણાવો.

નવી બોર્ડર પ્રકાર ગુણધર્મો

CSS3 માં કેટલીક નવી સરહદ પ્રોપર્ટીઝ છે:

• સરહદ-ત્રિજ્યા
  • સરહદ-ઉપર-જમણા- ત્રિજ્યા , સરહદ-નીચે-જમણા- ત્રિજ્યા , સરહદ-તળિયે-ડાબા-ત્રિજ્યા , સરહદ-ટોચ-ડાબી-ત્રિજ્યા
  • આ ગુણધર્મો તમને તમારી સરહદો પર ગોળાકાર ખૂણા બનાવવા માટે પરવાનગી આપે છે.
• સરહદ-છબી-સ્રોત
  • પહેલેથી વ્યાખ્યાયિત સરહદ શૈલીઓના બદલે ઉપયોગ કરવા માટેની છબી સ્રોત ફાઇલનો ઉલ્લેખ કરે છે
• સરહદ-છબી-સ્લાઇસ
  • સરહદ ઇમેજ ધારમાંથી ઇનવર્ડ ઓફસેટ્સનું પ્રતિનિધિત્વ કરે છે
• સરહદ-છબી-પહોળાઈ
  • તમારી સરહદની છબી માટેની પહોળાઈની કિંમત વ્યાખ્યાયિત કરે છે
• સરહદ-ઇમેજ-શરૂઆત
  • સરહદની છબી વિસ્તારની લંબાઈને વિસ્તારિત કરે છે.
• સરહદ છબી-ઉંચાઇ
  • વ્યાખ્યાયિત કરે છે કે સરહદની છબીની બાજુઓ અને મધ્ય ભાગ કેવી રીતે ટાઇલ અથવા સ્કેલ કરવામાં આવશે.
• સીમા-છબી
  • તમામ સરહદ ઇમેજ પ્રોપર્ટીઝ માટેના લૅલેથડ પ્રોપર્ટીઝ

બોર્ડર્સ અને પશ્ચાદભૂને સંબંધિત વધારાના CSS3 ગુણધર્મો

જ્યારે કોઈ પૃષ્ઠ વિરામ પર એક બૉક્સ તૂટી જાય છે, ત્યારે લાઇન-બ્રેક માટે સ્તંભ બ્રેક (ઇનલાઇન તત્વો માટે) બૉક્સ-શણગાર-વિરામની મિલકત વ્યાખ્યાયિત કરે છે કે કેવી રીતે નવા બૉક્સ સરહદ અને પેડિંગ સાથે આવરિત છે. બેકગ્રાઉન્ડ્સને આ ગુણધર્મની મદદથી બહુવિધ બટકા બોક્સ વચ્ચે વહેંચી શકાય છે.

બૉક્સ-શેડો પ્રોપર્ટી પણ છે જે બોક્સ તત્વોમાં પડછાયા ઉમેરવા માટે વાપરી શકાય છે.

CSS3 સાથે, હવે તમે કોષ્ટકો વગર વિનાક ઘણા કૉલમ અથવા જટિલ ડેવ ટેગ માળખાં સાથે સરળતાથી વેબ પૃષ્ઠ સેટ કરી શકો છો. તમે ફક્ત બ્રાઉઝરને કહી શકો છો કે બૉડી ઘટક કેટલી કૉલમ્સ હોવી જોઈએ અને તે કેટલાં પહોળાં હોવા જોઈએ. પ્લસ તમે બોર્ડર્સ (નિયમો), બેકગ્રાઉન્ડ રંગો ઉમેરી શકો છો, જે સ્તંભની ઊંચાઈને વિસ્તાર કરે છે, અને તમારા ટેક્સ્ટ તમામ કૉલમ્સ દ્વારા સ્વયંચાલિત રીતે ચાલશે.

CSS3 સ્તંભોને - સ્તંભની સંખ્યા અને પહોળાઈ વ્યાખ્યાયિત કરો

ત્રણ નવા ગુણધર્મો છે જે તમને તમારા કૉલમની સંખ્યા અને પહોળાઈને વ્યાખ્યાયિત કરવા દે છે:

• કૉલમ પહોળાઈ
  • પહોળાઈને તમારા કૉલમ હોવો જોઈએ તે વ્યાખ્યાયિત કરે છે. બ્રાઉઝર પછી જગ્યાને ભરવા માટે લખાણને પ્રવાહ કરશે જે વિશાળ છે.
• સ્તંભ-ગણતરી
  • પૃષ્ઠ પર કૉલમ્સની સંખ્યાને નિર્ધારિત કરે છે. બ્રાઉઝર પછી જગ્યામાં ફિટ કરવા માટે પૂરતી વિશાળ કૉલમ બનાવશે, પરંતુ ફક્ત તે જ નંબર જે તમે ઉલ્લેખિત કરો છો.
• કૉલમ
  • છાત્રાલયની મિલકત કે જ્યાં તમે પહોળાઈ અથવા સંખ્યા (અથવા બન્ને, પરંતુ તે ભાગ્યે જ અર્થમાં બનાવે છે) ને વ્યાખ્યાયિત કરી શકો છો.

CSS3 કૉલમ ભેદ અને નિયમો

સમાન મલ્ટિકોલમન્ડ દૃશ્યોમાં કૉલમ્સ વચ્ચે વિરામ અને નિયમો મૂકવામાં આવે છે. ગાબડાઓ કૉલમને અલગ પાડશે, પરંતુ નિયમો કોઈ પણ જગ્યા ન લેશે. જો કોઈ સ્તંભ નિયમ તેના અંતર કરતાં વિશાળ હોય, તો તે અડીને કૉલમને ઓવરલેપ કરશે. સ્તંભ નિયમો અને અવકાશ માટે પાંચ નવા ગુણધર્મો છે:

• સ્તંભ-અંતર
  • કૉલમ વચ્ચેના અવકાશની પહોળાઇ વ્યાખ્યાયિત કરે છે.
• સ્તંભ-નિયમ-રંગ
  • નિયમનો રંગ વ્યાખ્યાયિત કરે છે
• સ્તંભ-નિયમ-શૈલી
  • નિયમની શૈલી (નક્કર, ડોટેડ, ડબલ, વગેરે) ની વ્યાખ્યા આપે છે.
• સ્તંભ-નિયમ-પહોળાઈ
  • નિયમની પહોળાઈ વ્યાખ્યાયિત કરે છે.
• કોલમ-નિયમ
  • ત્રણેય સ્તંભ નિયમ ગુણધર્મોને એકવારમાં વ્યાખ્યાયિત કરતી એક લહેરાતી મિલકત.

CSS3 કૉલમ બ્રેક્સ, ફેલાયેલ કૉલમ, અને કૉલમ ભરવા

કૉલમ બ્રેક્સ એ જ CSS2 વિકલ્પોનો ઉપયોગ કરે છે જેનો ઉપયોગ પેજ સામગ્રીમાં બ્રેક્સને વ્યાખ્યાયિત કરવા માટે થાય છે, પરંતુ ત્રણ નવી ગુણધર્મો સાથે: વિરામ-પહેલા , વિરામ-પછી , અને વિરામ-અંદર .

કોષ્ટકોની જેમ, તમે કૉલમ-સ્પાન ગુણધર્મ સાથે કૉલમ્સને વિસ્તારવા માટે તત્વો સેટ કરી શકો છો. આ તમને હેડલાઇન્સ બનાવવાની મંજૂરી આપે છે જે એક અખબાર જેવા બહુવિધ કૉલમ વધુ સ્પૅન કરે છે.

કૉલમ ભરીને નક્કી કરે છે કે દરેક કૉલમમાં કેટલી સામગ્રી હશે. સંતુલિત સ્તંભો દરેક સ્તંભમાં સમાન જથ્થામાં સામગ્રી મૂકવાનો પ્રયાસ કરે છે જ્યારે સ્વયં સામગ્રીમાં ફક્ત પ્રવાહમાં આવે ત્યાં સુધી સ્તંભ ભરાય છે અને તે પછીના એક પર જાય છે.

CSS2 માં સમાવેલ છે તે CSS3 માં વધુ સુવિધાઓ

ત્યાં CSS3 માં ઘણાં બધાં લક્ષણો છે જે CSS2 માં અસ્તિત્વમાં નથી, જેમાં શામેલ છે:

• સીએસએસ ઢાંચો લેઆઉટ મોડ્યુલ અને CSS3 ગ્રીડ સ્થિતિ મોડ્યુલ : સીએસએસ સાથે ગ્રીડ બનાવી રહ્યા છે.
• CSS3 ટેક્સ્ટ મોડ્યુલ : ટેક્સ્ટ રૂપરેખા અને CSS સાથે ડ્રોપ-શેડોઝ બનાવો.
• CSS3 રંગ મોડ્યુલ : હવે અસ્પષ્ટ સાથે.
• બૉક્સ મોડેલમાં ફેરફાર : એક માર્કસ મિલકત સહિત જે IE ટૅગ જેવી કાર્ય કરે છે.
• CSS3 વપરાશકર્તા ઇન્ટરફેસ મોડ્યુલ : તમને નવા કર્સર્સ, ક્રિયાઓના જવાબો, આવશ્યક ફીલ્ડ્સ અને ઘટકોનું કદ બદલવું
• મીડિયા ક્વેરીઝ : સ્ટાઇલ શીટ કેવી રીતે વાપરવી તે વ્યાખ્યાયિત કરતી વખતે મીડિયા ક્વેરીઝ તમને વધુ સુગમતા આપે છે. દાખલા તરીકે, તમે સ્ટાઇલ શીટ વ્યાખ્યાયિત કરી શકો છો, જે ફક્ત હેન્ડહેલ્ડ ડિવાઇસીસ માટે જ છે જે 20 મીમ કરતા વધુ વ્યૂપોર્ટ ધરાવે છે.
• CSS3 રૂબી મોડ્યુલ : દસ્તાવેજોની ટિપ્પણી કરવા માટે ટેક્સ્ચ્યુઅલ રુબી ઉપયોગ કરતી ભાષાઓ માટે સપોર્ટ પ્રદાન કરે છે.
• CSS3 પેજ મીડિયા મોડ્યુલ : પેજ મીડિયા (કાગળ, પારદર્શકતા, વગેરે) માટે પણ વધુ સપોર્ટ માટે.
• જનરેટ કરેલી સામગ્રી : L ચાલતા મથાળાઓ અને ફૂટર્સ, ફૂટનોટ્સ અને અન્ય સામગ્રી કે જે પ્રોગ્રામેટિક રીતે જનરેટ કરવામાં આવે છે, ખાસ કરીને પેજ મીડિયા માટે.
• CSS3 ભાષણ મોડ્યુલ : શ્રાવ્ય સીએસએસ ફેરફારો.