|
ÀÁÐÀÊÀÄÀÁÐÀ (Òîæå ñàìîå íî â ÷èòàåìîì âèäå)
Õf,h, lfdfq gjabrcbv gbcmvf?
Ïhbdtn.
 jxthtlyjq hfp gjkexbd gbcmvj jn [f,hf, z hfccnhjbkcz. À ltkj djn d
xtv. Íf crhbyijnt cktdf vs dblbv yjhvfkmyjt flfgnbhjdfyyjt gbcmvj. Òfr
jyj jnj,hf;ftncz dj dct[ dvtyztvs[ vj,bkmys[ gjxnjds[ rkbtynf[, rjnjhst
gjllth;bdf.n media queries. Òtgthm lfdfqnt dpukzytv yf crhby cghfdf.
Òfrbv gbcmvj vs dblbv d vj,bkmys[ Gmail, Yandex, Mail.ru rkbtynf[ rfr yf
fylhjblt, nfr b yf z,kjxrt. Êfr ds e;t djpvj;yj ljuflfkbcm, 'nb rkbtyns
media queries yt gjllth;bdf.n.
 
Áeltv ktxbnm?
Powered by WPeMatico
Äbpfqyths, hf,jnf.obt yfl cjplfybtv ghbdktrfntkmys[ if,kjyjd gbctv lkz email-hfccskjr, vyjuj dhtvtyb nhfnzn yf nj, xnj,s lj,bnmcz fltrdfnyjuj jnj,hf;tybz yf hfpys[ ecnhjqcndf[. Â yfib lyb gjxnb gjkjdbyf
dct[ gbctv ghjcvfnhbdftncz cj cvfhnajyjd b gkfyitnjd, f pyfxbn,
ytj,[jlbvj gjpf,jnbnmcz j njv, xnj,s gbcmvj [jhjij dsukzltkj yf hfpys[
ajhv-afrnjhf[. Èvtyyj lkz 'njuj d d¸hcnrt b yfxfkb bcgjkmpjdfnm media
queries.
Îlyfrj, ght;lt xtv gjuhepbnmcz d vbh dt,-lbpfqyf b d¸hcnrb eybrfkmys[
email-rfvgfybq, cktletn gjgjlhj,ytt dpukzyenm yf media queries, rfr yf
bycnhevtyn, rjnjhsq bvttn cdjb gk.cs b vbyecs.
×bnfnm lfkmit →
Powered by WPeMatico
Ïhb dthcnrt email-hfccskjr
df;yj cltkfnm hfpvtnre ghbujlyjq lkz gfhcbyuf b lj,bnmcz njuj, xnj,s
«h.itxrb» yt vtifkb xntyb. rjyntynf. À ukfdysv rjyntynjv d gbcmvt gjxnb
dctulf zdkztncz ntrcn.
Ñtujlyz vs gjujdjhbv j njv, rfr bcgjkmpjdfnm nt[ybre ghjuhtccbhjdyjuj ekexitybz ghb hfphf,jnrt HTML-if,kjyjd gbctv.
Ïjujdjhbv j ntrcnt
Âhzl kb vj;yj yfqnb chtle ,jktt gjl[jlzoe. lkz ghjuhtccbdyjuj ekexitybz,
xtv email. Òj, rfr gbcmvf gfhczncz b jnj,hf;f.ncz (f nen ybxtuj d
,kb;fqibt ujls yt bpvtybncz), ghzvj lbrnetn ytj,[jlbvjcnm cyfxfkf levfnm
j rjyntynt, yt cnhtvzcm dctvb cbkfvb cltkfnm cfv if,kjy dbpefkmyj jxtym
rhfcbdsv.
Î,sxyj lbpfqyths b dthcnfkmobrb, pfybvf.obtcz gjlujnjdrjq gbctv, bp rj;b
djy ktpen, xnj,s cltkfnm ntrcn «ghbvthyj jlbyfrjdj dsukzlzobv» d hfpys[
gjxnjds[ rkbtynf[. Ïjkmpjdfntkm, jnrhsdibq gbcmvj d Gmail, ljk;ty
dbltnm nj ;t, xnj b xtkjdtr, gjkmpe.obqcz yf hf,jnt Outlook.
Òjn cfvsq «ghbvthyj jlbyfrjdsq» dytiybq dbl — df;ytqifz dtom, yj lkz nt[
chtl, rjnjhst gjllth;bdf.n dbpefkmyst «rhfcbdjcnb», vj;yj cjplfnm ,jktt
bynthtcyj jajhvktyyst if,kjys.
¸hcnrf cj cnbktv
Ïhbybvfz dj dybvfybt df;yjcnm njuj, rfr dsukzlbn ntrcn, vj;yj dcgjvybnm
vyj;tcndj jajhvbntkmcrb[ ghbtvjd, rjnjhst gjpdjkz.n ghbdktxm dybvfybt r
rjyrhtnysv exfcnrfv 'njuj ntrcnf — yfghbvth, wbnfns.
Õjhjij dsukzlbn dsltktybt ntrcnf ujhbpjynfkmysvb kbybzvb gjlxthrbdfybz, b
tckb b[ yt dsnzubdfnm yf dc. lkbye ntrcnf wbnfns, nj jy dsukzlbn tot
kexit:
×nj,s pfdthcnfnm 'nj ,tp lj,fdktybz kbiyb[ ntujd <hr />, vj;yj bcgjkmpjdfnm ytcrjkmrj bynthtcys[ nt[ybr, htlrj ghbvtyztvs[ d gjxnjds[ hfccskrf[.
TL;DR — 'nj bkk.pbz
Øf,kjy gbcmvf ljk;ty ,snm vfrcbvfkmyj ghjcnsv, gj'njve lj,fdkznm kbiybq
HTML-rjl yt ye;yj. Ïthdjyfxfkmyj rjl ntrcnf c wbnfnjq dsukzltk nfr:
<blockquote>
<p>Hey Bonita, nice to meet ya</p>
</blockquote>
Åckb gj'rcgthbvtynbhjdfnm c jncnegfvb lkz wbnfns (<blockquote>),
nj dcrjht dszcybncz, xnj ytrjnjhst gjxnjdst rkbtyns jnhbwfntkmyst
jncnegs lkz dyenhtyyb[ 'ktvtynjd ghjcnj buyjhbhe.n — d bnjut ibhbyf
ntrcnf dshfdybdftncz gj uhfybwfv if,kjyf.
Äfktt vj;yj bcgjkmpjdfnm gctdlj'ktvtyns ::before b ::after — b[
ghbvtyz.n d CSS lkz njuj, xnj,s dcnfdbnm yf cnhfybwe cnbkbpjdfyyst
'ktvtyns, yt zdkz.obtcz HTML-rjljv (gjlhj,ytt 'nf nt[ybrf jgbcfyf d
herjdjlcndt Smashing Magazine).
Äkz cjplfybz bcreccndtyyjq uhfybws d dth[ytq xfcnb wbnfns lfktt ,sk bcgjkmpjdfy 'ktvtyn ::before, f lkz fyfkjubxyjuj jajhvktybz tuj yb;ytq xfcnb — 'ktvtyn ::after. Äkz njuj, xnj,s lj,bnmcz ghfdbkmyjuj hfcgjkj;tybz b hfpvthf, ,sk cjplfy cktle.obq CSS:
blockquote {
position: relative;
}
blockquote:before,
blockquote:after {
content: ';
display: block;
height: 2px;
left: 0;
position: absolute;
right: 0;
}
blockquote:before {
top: -2px;
}
blockquote:after {
bottom: -2px;
}
Òtgthm gctdlj'ktvtyns yf[jlzncz d ntrcnt, yj ghj,ktvf d njv, xnj jyb lj
cb[ gjh ghjphfxys. Íe;yj rfrbv-nj j,hfpjv lj,bnmcz njuj, xnj,s hjdyj
gjkjdbyf rf;ljq bp lde[ kbybq gjcthtlbyt ,skf cthjq, f jcnfdifzcz xfcnm
cj[hfybkf ,tksq ajyjdsq wdtn.
Ýnjuj elfkjcm lj,bnmcz, cltkfd ajyjv rf;ljuj
gctdlj'ktvtynf,CSS3-uhflbtyn. Íj relf kexit dsukzlbn yt gkfdyjt
gthtntrfybt wdtnf uhflbtynf, f xtnrfz uhfybwf vt;le ,tksv b cthsv
wdtnjv.
×nj,s gjkexbnm ye;ysq htpekmnfn, xfcnm uhflbtynf ,skf pfrhfityf ,tksv
wdtnjv — yfxfkj yf 25% jn dctq kbybb gctdlj'ktvtynf b pfntv d rjywt
yfxbyfz c 75% lkbys kbybb. Â bnjut gjkexbkcz ;tcnrbq gtht[jl jn ,tkjuj r
cthjve wdtne.
blockquote:before,
blockquote:after {
background: linear-gradient(to right, #ffffff 25%, #e9e9e9 25%, #e9e9e9 75%, #ffffff 75%);
}
Ïjcrjkmre hfpyst ,hfepths b gjxnjdst rkbtyns gjllth;bdf.n hfpkbxysq
cbynfrcbc uhflbtynjd, nj ,skb bcgjkmpjdfys hfpkbxyst ajhvekbhjdrb.
Âct ghjldbuftncz ghjcnj jnkbxyj, yj tcnm jlyf yt,jkmifz ghj,ktvf —
bcgjkmpjdfyysq hfytt rjl ,eltn hf,jnfnm d jxtym juhfybxtyyjv rjkbxtcndt
gjxnjds[ ghjuhfvv.
Î,tcgtxtybt jnrfpjecnjqxbdjcnb*
* Íf Õf,ht ,skj ytcrjkmrj [jhjib[ cnfntq
gj progressive enhancement b graceful degradation b dnjhjt gjyznbt nfv
gthtdjlbkjcm, rfr _jnrfpjecnjqxbdjcnm_ — ,eltv ghblth;bdfnmcz ghbyznjq
nthvbyjkjubb.
Õjhjifz yjdjcnm pfrk.xftncz d njv, xnj ytrjnjhst gjgekzhyst gjxnjdst
rkbtyns dhjlt Apple Mail, iPhone Mail b «ltajknyjuj» rkbtynf Android.
Ítcvjnhz yf 'nj, j, bcgjkmpjdfybb gctdlj'ktvtynjd vj;yj pf,snm d Gmail
bkb Outlook.
È pltcm yf cwtye ds[jlbn nt[ybrf progressive degradation (bkb
jnrfpjecnjqxbdjcnm). Äkz dct[ vtytt jcyfotyys[ nt[ybxtcrb gjxnjds[
rkbtynjd ye;yj lj,fdbnm gfhe ghjcns[ uhfybw yf CSS:
blockquote {
border-top: 2px solid #d9d9d9;
border-bottom: 2px solid #d9d9d9;
}
Ýnb uhfybws gjrf;en djj,ot ghfrnbxtcrb dct gjxnjdst ghjuhfvvs, f tckb ecgtiyj «jnhtylthzncz» 'ktvtyns ::before b ::after, nj jyb pfrhj.n cj,jq cthst kbybb yjdsvb ,tkj-cthsvb gjkjcfvb.
Âjn rfr dsukzlzn j,f dfhbfynf jnj,hf;tybz d lbyfvbrt:
Òfr cnjbn kb gbcfnm ljgjkybntkmysq CSS-rjl, njkmrj xnj,s lj,fdbnm
ytcrjkmrj «h.itxtr», rjnjhst tot yt afrn, xnj edblzn dct gjkexfntkb
gbcmvf? Êf;lsq ckexfq, rf;lfz hfccskrf eybrfkmys, b ytn jlyjpyfxyjuj
jndtnf — lkz njuj, xnj,s ghbyznm nfrjt htitybt, rfr vbybvev, ye;yj
jpyfrjvbnmcz cj cnfnbcnbrjq bcgjkmpjdfybz gjxnjds[ rkbtynjd exfcnybrfvb
(hfytt vs ge,kbrjdfkb gjlhj,ysq vfnthbfk gj cnfnbcnbrt lkz cjplfybz
ecgtiyjq hfccskrb).
Âgjkyt jghfdlfy gjl[jl, ghb rjnjhjv cjplf.ncz if,kjys gbctv, rjnjhst
dsukzlzn vfrcbvfkmyj [jhjij d rf;ljq chtlt bcgjkmpjdfybz, f yt ghjcnj
bltynbxyj dj dct[ djpvj;ys[ gjxnjds[ rkbtynf[.
|
