నేటి వెబ్ బ్రౌజర్ క్రాస్ బ్రౌజర్ అనుగుణంగా ఏ రకమైన wishful ఆలోచన ఉంది క్రేజీ రోజుల నుండి చాలా దూరంగా వచ్చింది. నేటి వెబ్ బ్రౌజర్లు అన్ని ప్రమాణాలు-కంప్లైంట్. వారు కలిసి చక్కగా ప్లే మరియు వివిధ బ్రౌజర్లు అంతటా చాలా స్థిరమైన పేజీ ప్రదర్శన పంపిణీ. ఇందులో గూగుల్ క్రోమ్, మైక్రోసాఫ్ట్ ఎడ్జ్, మొజిల్లా ఫైర్ఫాక్స్, ఒపెరా, సఫారి, మరియు అనేక మొబైల్ బ్రౌజర్లలో ఉన్న వివిధ బ్రౌజర్లలోని తాజా వెర్షన్లు వెబ్ సైట్ ను ఉపయోగించుకుంటాయి.
ఇది వెబ్ బ్రౌజర్స్ విషయానికి వస్తే మరియు ఖచ్చితంగా వారు CSS ను ప్రదర్శించేటప్పుడు పురోగతి సాధించినప్పటికీ, ఈ వివిధ సాఫ్ట్వేర్ ఎంపికల మధ్య ఇప్పటికీ అస్థిరతలు ఉన్నాయి. అప్రమేయంగా ఆ బ్రౌజర్లు అంచులు, padding మరియు సరిహద్దులను ఎలా లెక్కించవచ్చో సాధారణ అసమానతలు ఒకటి.
ఎందుకంటే బాక్స్ మోడల్ ప్రభావం అన్ని HTML మూలకాల యొక్క ఈ అంశాల కారణంగా మరియు పేజీ లేఅవుట్లను సృష్టించడంలో అవి చాలా ముఖ్యమైనవి కాబట్టి, అస్థిరమైన ప్రదర్శన అంటే ఒక పేజీ ఒక బ్రౌజర్లో గొప్పగా కనిపిస్తుందని, కానీ ఇంకొకదానిలో కొంచెం వెలుగుచూడండి. ఈ సమస్యను ఎదుర్కొనేందుకు, అనేక వెబ్ డిజైనర్లు బాక్స్ మోడల్ యొక్క ఈ అంశాలను సాధారణీకరించారు. ఈ అభ్యాసం అంచులు, పాడింగ్ మరియు సరిహద్దుల కోసం విలువలను "అవుట్ చేయడాన్ని" కూడా పిలుస్తారు.
బ్రౌజర్ డిఫాల్ట్లపై గమనిక
వెబ్ బ్రౌజర్లు అన్ని పేజీ యొక్క నిర్దిష్ట ప్రదర్శన కోణాలు కోసం డిఫాల్ట్ సెట్టింగులను కలిగి ఉంటాయి. ఉదాహరణకు, హైపర్ లింక్లు నీలం మరియు డిఫాల్ట్గా మార్క్ చేయబడ్డాయి. ఇది వివిధ బ్రౌజర్లలో అనుగుణంగా ఉంటుంది మరియు చాలా మంది డిజైనర్లు తమ నిర్దిష్ట ప్రాజెక్ట్ రూపకల్పన అవసరాలకు అనుగుణంగా మారుతున్నప్పటికీ, అవి ఒకే డిఫాల్ట్లతో మొదలవుతున్నాయనే వాస్తవం ఈ మార్పులను సులభతరం చేస్తుంది. పాపం, అంచులు, పాడింగ్ మరియు సరిహద్దుల కోసం డిఫాల్ట్ విలువ క్రాస్-బ్రౌజర్ అనుగుణ్యతను అదే స్థాయిలో కలిగి ఉండవు.
అంచులు మరియు పాడింగ్ కోసం విలువలు సాధారణీకరణ
అస్థిరమైన బాక్స్ మోడల్ యొక్క సమస్యను పరిష్కరించడానికి ఉత్తమమైన మార్గం, HTML మూలకాల అన్ని అంచులు మరియు పాడింగ్ విలువలను సున్నాకి సెట్ చేయడం. మీరు మీ స్టైల్షీట్కు ఈ CSS నియమాన్ని జోడించడం ఈ విధంగా చేయగల కొన్ని మార్గాలు ఉన్నాయి:
* {margin: 0; పాడింగ్: 0; }ఈ CSS నియమం * లేదా వైల్డ్కార్డ్ పాత్రను ఉపయోగిస్తుంది. ఆ పాత్ర అంటే "అన్ని అంశాలు" మరియు ఇది ప్రతి HTML మూలకాన్ని ప్రాథమికంగా ఎంచుకుంటుంది మరియు అంచులు మరియు పాడింగ్లను 0 కు సెట్ చేస్తుంది. ఈ నియమం చాలా బాహ్యమైనప్పటికీ, మీ బాహ్య స్టైల్షీట్లో ఉన్నందున ఇది డిఫాల్ట్ బ్రౌజర్ కంటే ఎక్కువ ప్రత్యేకతను కలిగి ఉంటుంది విలువలు చేయండి. మీరు డిఫాల్ట్లను భర్తీ చేస్తున్నారంటే, ఈ శైలి ఏమి చేయాలో మీరు నిర్మిస్తాం.
HTML మరియు శరీర మూలకాలకు ఈ విలువలను వర్తింపజేయడం మరొక ఎంపిక. ఎందుకంటే మీ పేజీలోని అన్ని ఇతర మూలకాలు ఈ రెండు అంశాలకు చెందిన పిల్లలుగా ఉంటాయి, CSS క్యాస్కేడ్ అన్ని ఇతర అంశాలకు ఈ విలువలను వర్తింపజేయాలి.
html, శరీరం {margin: 0; పాడింగ్: 0; }ఇది అన్ని బ్రౌజర్లలో ఒకే స్థలంలో మీ రూపకల్పన ప్రారంభమవుతుంది, కానీ గుర్తుంచుకోవడానికి ఒక విషయం మీరు అన్ని అంచులు మరియు పాడింగ్ను ఆపివేసినట్లయితే, మీరు మీ వెబ్ పేజీ యొక్క నిర్దిష్ట భాగాల కోసం వాటిని తిరిగి ఎంచుకోవాలి, మరియు మీ డిజైన్ పిలుపునిచ్చింది.
బోర్డర్స్
మీరు ఆలోచిస్తూ ఉండవచ్చు "కానీ బ్రౌజర్లు అప్రమేయంగా శరీర మూలకం చుట్టూ సరిహద్దు కలిగి". ఇది ఖచ్చితంగా నిజం కాదు. ఇంటర్నెట్ ఎక్స్ప్లోరర్ యొక్క పాత సంస్కరణలు మూలకాల చుట్టూ పారదర్శకంగా లేదా కనిపించని సరిహద్దును కలిగి ఉంటాయి. మీరు సరిహద్దును 0 కు సెట్ చేయకపోతే, ఆ సరిహద్దు మీ పేజీ లేఔట్లను విసిగిపోతుంది. మీరు IE యొక్క ఈ పాత సంస్కరణలకు మద్దతునివ్వబోతున్నారని నిర్ణయించినట్లయితే, మీరు మీ శరీరానికి మరియు HTML శైలులకు కిందివాటిని జోడించడం ద్వారా దీనిని పరిష్కరించాలి:
HTML, శరీరం {
మార్జిన్: 0px;
పాడింగ్: 0px;
సరిహద్దు: 0px;
}
మీరు అంచులు మరియు పాడింగ్లను ఎలా నిలిపివేసారో అదే విధంగా, ఈ కొత్త శైలి డిఫాల్ట్ సరిహద్దులను కూడా ఆఫ్ చేస్తుంది. ఇంతకుముందు వ్యాసంలో చూపించిన వైల్డ్కార్డ్ సెలెక్టర్ను ఉపయోగించడం ద్వారా మీరు ఇదే పని చేయవచ్చు.
జెన్నిఫర్ క్రిన్ని రచించిన అసలు వ్యాసం. జెరెమీ గిరార్డ్ 9/27/16 న సవరించబడింది.