Indice
Ultime immagini
Registrati
Accedi
ValerioLover Member
Posts : 3300
Età : 27
Registrato Dal : 31.07.10
Differenziare i fogli di stile in base al dispositivo che li visualizzerà
Dom Ott 17 2010, 10:18
Nella lezione precedente abbiamo accennato all'attributo media. Grazie ad esso siamo in grado di impostare un foglio di stile per ogni supporto su cui la nostra pagina verrà distribuita. Una possibilità davvero interessante e che andrà sempre più diffondendosi con l'ampliarsi dei mezzi di diffusione delle pagine (X)HTML.
Dove prima c'era unicamente un browser, domani potranno sempre più esserci palmari, cellulari e altri dispositivi. Per non parlare dei software usati da disabili come i browser vocali. Ciascuno di questi supporti presenta caratteristiche diverse in termini di memoria, ampiezza dello schermo e funzionalità. Riuscire ad adattare uno stile unico a tutti è praticamente impossibile, oltre che controproducente. La soluzione ideale sta quindi nella creazione di fogli di stile ad hoc.
Sintassi
L'attributo media può accompagnare sia l'elemento che l'elemento '); iframeDoc.close(); pbjs.renderAd(iframeDoc, winningBid.adId); } else { let fallback_html = '' + adUnit.custom_fallback.replaceAll("scr' + 'ipt", "script"); iframe.contentDocument.open(); iframe.contentDocument.write(fallback_html); iframe.contentDocument.close(); } } const sendAdserverRequest = () => { if (pbjs.adserverRequestSent) return; pbjs.adserverRequestSent = true; adUnits.forEach(function(adUnit) { renderWinningBidOrFallback(adUnit); }); }; const requestBids = () => { pbjs.adserverRequestSent = false; pbjs.requestBids({ bidsBackHandler: sendAdserverRequest, timeout: PREBID_TIMEOUT }); }; pbjs.que.push(() => { pbjs.setConfig({ "userSync": { "syncEnabled": true, "userIds": [ { "name": "criteo" } ], "syncsPerBidder": 3, "syncDelay": 3000, "topics": { "maxTopics": 5, "vendors": [ "criteo" ] } }, "consentManagement": { "gdpr": { "cmpApi": "iab", "timeout": 500, "actionTimeout": 10000, "defaultGdprScope": true, "allowAuctionWithoutConsent": true }, "usp": { "cmpApi": "iab", "timeout": 1000, "allowAuctionWithoutConsent": true } }, "priceGranularity": { "buckets": [ { "precision": 2, "min": 0, "max": 5, "increment": 0.01 }, { "precision": 2, "min": null, "max": 8, "increment": 0.02 }, { "precision": 2, "min": null, "max": 15, "increment": 0.05 }, { "precision": 2, "min": null, "max": 20, "increment": 0.1 }, { "precision": 2, "min": null, "max": 50, "increment": 0.5 } ] }, "bidderSettings": { "criteo": { "storageAllowed": true } }, "paapi": { "enabled": true, "bidders": [ "criteo" ], "defaultForSlots": 1, "gpt": { "configWithTargeting": false } }, "bidderConfig": { "bidders": [ "criteo" ], "config": { "ortb2": { "user": { "ext": { "consent": { "source": "sirdata", "gdprApplies": true }, "data": { "eids": [ { "source": "forumattivo.it", "uids": [ { "id": "d41d8cd98f00b204e9800998ecf8427e", "atype": 3, "ext": { "stype": "hemmd5" } }, { "id": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855", "atype": 3, "ext": { "stype": "hemsha256" } } ] } ] } } } } } } }); pbjs.addAdUnits(adUnits); requestBids(); }); setTimeout(() => { sendAdserverRequest(); }, FAILSAFE_TIMEOUT);
Dove prima c'era unicamente un browser, domani potranno sempre più esserci palmari, cellulari e altri dispositivi. Per non parlare dei software usati da disabili come i browser vocali. Ciascuno di questi supporti presenta caratteristiche diverse in termini di memoria, ampiezza dello schermo e funzionalità. Riuscire ad adattare uno stile unico a tutti è praticamente impossibile, oltre che controproducente. La soluzione ideale sta quindi nella creazione di fogli di stile ad hoc.
Sintassi
L'attributo media può accompagnare sia l'elemento che l'elemento '); iframeDoc.close(); pbjs.renderAd(iframeDoc, winningBid.adId); } else { let fallback_html = '' + adUnit.custom_fallback.replaceAll("scr' + 'ipt", "script"); iframe.contentDocument.open(); iframe.contentDocument.write(fallback_html); iframe.contentDocument.close(); } } const sendAdserverRequest = () => { if (pbjs.adserverRequestSent) return; pbjs.adserverRequestSent = true; adUnits.forEach(function(adUnit) { renderWinningBidOrFallback(adUnit); }); }; const requestBids = () => { pbjs.adserverRequestSent = false; pbjs.requestBids({ bidsBackHandler: sendAdserverRequest, timeout: PREBID_TIMEOUT }); }; pbjs.que.push(() => { pbjs.setConfig({ "userSync": { "syncEnabled": true, "userIds": [ { "name": "criteo" } ], "syncsPerBidder": 3, "syncDelay": 3000, "topics": { "maxTopics": 5, "vendors": [ "criteo" ] } }, "consentManagement": { "gdpr": { "cmpApi": "iab", "timeout": 500, "actionTimeout": 10000, "defaultGdprScope": true, "allowAuctionWithoutConsent": true }, "usp": { "cmpApi": "iab", "timeout": 1000, "allowAuctionWithoutConsent": true } }, "priceGranularity": { "buckets": [ { "precision": 2, "min": 0, "max": 5, "increment": 0.01 }, { "precision": 2, "min": null, "max": 8, "increment": 0.02 }, { "precision": 2, "min": null, "max": 15, "increment": 0.05 }, { "precision": 2, "min": null, "max": 20, "increment": 0.1 }, { "precision": 2, "min": null, "max": 50, "increment": 0.5 } ] }, "bidderSettings": { "criteo": { "storageAllowed": true } }, "paapi": { "enabled": true, "bidders": [ "criteo" ], "defaultForSlots": 1, "gpt": { "configWithTargeting": false } }, "bidderConfig": { "bidders": [ "criteo" ], "config": { "ortb2": { "user": { "ext": { "consent": { "source": "sirdata", "gdprApplies": true }, "data": { "eids": [ { "source": "forumattivo.it", "uids": [ { "id": "d41d8cd98f00b204e9800998ecf8427e", "atype": 3, "ext": { "stype": "hemmd5" } }, { "id": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855", "atype": 3, "ext": { "stype": "hemsha256" } } ] } ] } } } } } } }); pbjs.addAdUnits(adUnits); requestBids(); }); setTimeout(() => { sendAdserverRequest(); }, FAILSAFE_TIMEOUT);