വെബ്സൈറ്റിന്റെ രൂപകൽപ്പനയിൽ ഐഫ്രെയിസ് പ്രവർത്തിക്കുന്നത് എങ്ങനെയെന്ന് മനസിലാക്കുക
നിങ്ങളുടെ HTML ൽ ഒരു ഘടകകം ഉൾച്ചേർക്കുമ്പോൾ, നിങ്ങൾക്ക് CSS ശൈലികൾ ചേർക്കുന്നതിന് നിങ്ങൾക്ക് രണ്ട് അവസരങ്ങൾ ഉണ്ട്:
- നിങ്ങൾക്ക് ശൈലി സ്വയം IFRAME ചെയ്യാൻ കഴിയും.
- നിങ്ങൾക്ക് IFRAME- ൽ (ചില വ്യവസ്ഥകൾക്കകത്ത്) താളുകൾ ശൈലി ചെയ്യാം.
ശൈലിയിലേയ്ക്ക് CSS ഉപയോഗിച്ച് IFRAME എലമെന്റ്
നിങ്ങളുടെ ഐഫോമിംഗുകൾ രൂപപ്പെടുത്തുന്ന സമയത്ത് നിങ്ങൾ ആദ്യം പരിഗണിക്കുന്നത് IFRAME തന്നെയാണ്. മിക്ക ബ്രൌസറുകളിലും ധാരാളം ഒപ്ഷനുകൾ ഇല്ലാതെ iframes ഉൾക്കൊള്ളുന്നു, അവ ഇപ്പോഴും സ്ഥിരത നിലനിർത്താൻ ചില ശൈലികൾ ചേർക്കാൻ നല്ല ആശയം തുടർന്ന്.
ഇവിടെ ഞാൻ എല്ലായ്പ്പോഴും എന്റെ iframes ൽ ചില CSS ശൈലികൾ ഉണ്ട്:
- മാർജിൻ: 0;
- പാഡിംഗ്: 0;
- അതിർത്തി: ഒന്നുമില്ല;
- വീതി: മൂല്യം ;
- ഉയരം: മൂല്യം ;
എന്റെ പ്രമാണത്തിൽ അനുയോജ്യമായ വലുപ്പത്തിനനുസരിച്ച് വീതിയും ഉയരവും സജ്ജീകരിക്കുക. ശൈലികളല്ലാത്ത ഒരു ഫ്രെയിമിലെ ഉദാഹരണങ്ങളും ഒന്ന് മാത്രം അടിസ്ഥാനമാക്കിയുള്ള ശൈലികളുമാണ്. നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, ഈ ശൈലികൾ കൂടുതലും വെറും iframe ന് ചുറ്റുമുള്ള ബോർഡർ നീക്കം ചെയ്യുകയാണ്, എന്നാൽ എല്ലാ ബ്രൌസറുകളും ഒരേ മാർജിനുകളും പാഡിംഗും അളവുകളും ഉള്ള iframe പ്രദർശിപ്പിക്കുന്നത് ഉറപ്പാക്കും.
സ്ക്രോൾ ബാറുകൾ നീക്കുന്നതിനായി നിങ്ങൾ ഓവർഫ്ലോ സ്വത്തവകാശം ഉപയോഗിക്കുമെന്ന് HTML5 നിർദ്ദേശിക്കുന്നു, എന്നാൽ അത് വിശ്വസനീയമല്ല. നിങ്ങൾക്ക് സ്ക്രോൾ ബാറുകൾ നീക്കം ചെയ്യാനോ മാറ്റാനോ ആഗ്രഹമുണ്ടെങ്കിൽ, നിങ്ങളുടെ iframe- ൽ സ്ക്രോളിംഗ് ആട്രിബ്യൂട്ട് ഉപയോഗിക്കണം. സ്ക്രോളിംഗ് ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നതിന്, മറ്റേതെങ്കിലും ആട്രിബ്യൂട്ട് പോലെ ചേർക്കുക കൂടാതെ മൂന്നു മൂല്യങ്ങളിൽ ഒന്ന് തിരഞ്ഞെടുക്കുക: അതെ, അല്ല, അല്ലെങ്കിൽ യാന്ത്രികം. അതെ സ്ക്രോൾ ബാറുകൾ ആവശ്യമില്ലെങ്കിൽപ്പോലും എല്ലായ്പ്പോഴും ബ്രൌസറോട് പറയുന്നു. ആവശ്യമില്ലെങ്കിൽ ഇല്ലെങ്കിൽ എല്ലാ സ്ക്രോൾ ബാറുകളും നീക്കം ചെയ്യുന്നതല്ല.
സ്വപ്രേരിതമാണ് സ്വയമേവ അവ ആവശ്യമുള്ളപ്പോൾ സ്ക്രോൾ ബാറുകൾ ഉൾപ്പെടുത്തി അവ ഇല്ലാതിരിക്കുമ്പോൾ അവ നീക്കം ചെയ്യുന്നു.
സ്ക്രോളിംഗ് ആട്രിബ്യൂട്ടിനോടൊപ്പം സ്ക്രോൾ ചെയ്യുന്നത് എങ്ങനെ ഓഫ് ചെയ്യാം:
സ്ക്രോളിംഗ് = "അല്ല" >
ഇത് ഒരു iframe ആണ്.
HTML5- ൽ സ്ക്രോളിംഗ് ഓഫ് ചെയ്യുന്നതിന് നിങ്ങൾ ഓവർഫ്ലോ സ്വത്തവകാശം ഉപയോഗിക്കേണ്ടതാണ്. എന്നാൽ ഈ ഉദാഹരണങ്ങളിൽ നിങ്ങൾക്ക് കാണാൻ കഴിയുന്നത് പോലെ എല്ലാ ബ്രൌസറുകളിലും ഇതു വിശ്വസനീയമായി പ്രവർത്തിക്കില്ല.
ഇവിടെ എങ്ങനെയാണ് നിങ്ങൾ ഓവർഫ്ലോ പ്രോപ്പർട്ടി ഉപയോഗിച്ച് സ്ക്രോൾ ചെയ്യുന്നത്?
style = "overflow: scroll;" >
ഇത് ഒരു iframe ആണ്.
ഓവർഫ്ലോ സ്വത്ത് ഉപയോഗിച്ച് സ്ക്രോൾ ചെയ്യുന്നത് പൂർണ്ണമായും ഒഴിവാക്കാൻ ഒരു വഴിയുമില്ല .
പല ഡിസൈനർമാരും അവരുടെ iframes ന്റെ പേജിൽ പശ്ചാത്തലത്തിൽ ചേരുവാൻ ആഗ്രഹിക്കുന്നു, അതിനാൽ വായനക്കാർക്കറിയാം iframes അവിടെ ഉണ്ടെന്ന്. എന്നാൽ അവയെ സ്റ്റാൻഡേർഡ് ചെയ്യാൻ സ്റ്റൈലുകളും ചേർക്കാനും കഴിയും. Iframe കാണിക്കുന്ന തരത്തിൽ ബോർഡറുകൾ ശരിയായി ക്രമീകരിക്കുക എളുപ്പമാണ്. ബോർഡറുകളുടെ ശൈലിയിലേക്ക് ബോർഡർ ശൈലിയിലുള്ള പ്രോപ്പർട്ടി ഉപയോഗിക്കുക (അല്ലെങ്കിൽ അത് ബോർഡർ-ടോപ്പ്, ബോർഡർ-വലത്, ബോർഡർ-ഇടത്, ബോർഡർ-ബോട്ട് പ്രോപ്പർട്ടീസ് എന്നിവയ്ക്ക് ഉപയോഗിക്കുക)
iframe {
ബോർഡർ-ടോപ്പ്: # c00 1px ഡോട്ട്;
ബോർഡർ-വലത്: # c00 2px dotted;
ബോർഡർ-ഇടത്: # c00 2px dotted;
ബോർഡർ-അടിയിൽ: # c00 4px dotted;
}
എന്നാൽ നിങ്ങളുടെ ശൈലികൾക്കായി സ്ക്രോളിംഗും ബോർഡറുകളും നിങ്ങൾ നിർത്തരുത്. നിങ്ങൾക്ക് മറ്റ് CSS സ്റ്റൈലുകൾ നിങ്ങളുടെ iframe- ൽ പ്രയോഗിക്കാൻ കഴിയും. Iframe a shadow, rounded corners, 20 ഡിഗ്രി തിരിച്ച് നൽകുന്നതിനായി ഈ ഉദാഹരണം CSS3 ശൈലികൾ ഉപയോഗിക്കുന്നു.
iframe {
മാർജിൻ-ടോപ്പ്: 20px;
മാർജിൻ-അടിയിൽ: 30px;
-മോസ്-ബോർഡർ-ആരം: 12px;
-വെബ്കിറ്റ്-അതിർത്തി-ആരം: 12px;
ബോർഡർ-ആരം: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
ബോക്സ്-ഷാഡോ: 4px 4px 14px # 000;
-മോസ്-ട്രാൻസ്ഫോർ: റൊട്ടേറ്റ് (20deg);
-വൈബ്കിറ്റ്-പരിവർത്തനം: റൊട്ടേറ്റ് (20deg);
-ഒ-പരിവർത്തനം: റൊട്ടേറ്റ് (20deg);
-ms-transform: റൊട്ടേറ്റ് (20deg);
ഫിൽറ്റർ: progid: DXImageTransform.Microsoft.BasicImage (റൊട്ടേഷൻ = .2);
}
Iframe ഉള്ളടക്കം സ്റ്റൈലിംഗ്
ഒരു iframe- ന്റെ ഉള്ളടക്കങ്ങൾ മറ്റേതെങ്കിലും വെബ് പേജ് സ്ലൈലിംഗിനെ പോലെയാണ്. എന്നാൽ, നിങ്ങൾക്ക് പേജ് എഡിറ്റ് ചെയ്യാനുള്ള ആക്സസ് ഉണ്ടായിരിക്കണം . നിങ്ങൾക്ക് പേജ് എഡിറ്റുചെയ്യാൻ കഴിയുന്നില്ലെങ്കിൽ (ഉദാഹരണത്തിന്, ഇത് മറ്റൊരു സൈറ്റിൽ ലഭ്യമാണ്).
നിങ്ങൾക്ക് പേജ് എഡിറ്റുചെയ്യാൻ കഴിയുമെങ്കിൽ, നിങ്ങളുടെ സൈറ്റിലെ മറ്റേതെങ്കിലും വെബ് ശൈലിയിൽ നിങ്ങൾ ഇഷ്ടപ്പെടുന്ന പോലെ നിങ്ങൾക്ക് ഒരു ബാഹ്യ സ്റ്റൈൽ ഷീറ്റ് അല്ലെങ്കിൽ പ്രമാണ ശൈലി ചേർക്കാം.