Preview Mode Links will not work in preview mode

Cascading Style Sheets (CSS) is the web’s core styling language. For web developers, It’s one of the quickest technologies to get started with, but one of the hardest to master. Follow Una Kravets and Adam Argyle, Developer Advocates from Google, who gleefully breakdown complex aspects of CSS into digestible episodes covering everything from accessibility to z-index.

  1. All Episodes
  2. 79: Popover and Dialog

79: Popover and Dialog

Jun 6, 2024

The CSS Podcast is back, with an episode highlighting the popover API and dialog element! Learn what they can do, and when to use which when.

Links
Popover API lands in Baseline → https://goo.gle/3Vo2dIs
Dialogs and popovers seem similar. How are they different? → https://goo.gle/3wXD1z5
Dialog dilemmas and modal mischief → https://goo.gle/3R9nmDE Semantics and the popover attribute → https://goo.gle/3Vl3NuM Building a dialog component GUI Challenges → https://goo.gle/4c0YFkK

Una Kravets (co-host)
Twitter | Instagram | YouTube
Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 

Adam Argyle (co-host)
Twitter | Instagram | YouTube
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘

').html('If you are using an iPad, you may install the app below:')); } $('#download_app_div').append(plistAnchor); } else { $('#download_app_div').empty().html('An error has occurred:' + json.message); } } else { $('#download_app_div').empty().html('An error has occurred'); } }, error:function(xhr, textStatus, errorThrown){ $('#download_app_div').empty().html('An error has occurred: ' + textStatus); } }); } else { $('#download_app_div').empty().html('Sorry, app download is only available for iOS devices.'); } } $("#btn-send-contact").click(function(event){ event.preventDefault(); var error = ""; //validate var valid = true; $('#podcast-page-contact-form').find(':input:not(button)').each(function(){ var name = $(this).attr("name"); var value = $(this).val(); if (typeof name != 'undefined' && value == ""){ valid = false; return false; } }); if(valid){ //submit form var datastring = $("#podcast-page-contact-form").serialize(); $.ajax({ type: "POST", url: "https://web-support.libsyn.com/contact/submit", data: datastring, dataType: "json", success: function(data) { if(data == false){ error = "Error Your message could not be sent at this time. Please try again later."; $("#podcast-page-contact-form-error").html(error).fadeIn().delay(5000).fadeOut(); } else { $('#podcast-page-contact-form').find(":input").val("").hide(); $('#podcast-page-contact-form').fadeOut(); $("#podcast-page-contact-form-success").show(); } }, error: function() { error = "Error Your message could not be sent at this time. Please try again later."; $("#podcast-page-contact-form-error").html(error).fadeIn().delay(5000).fadeOut(); } }); } else { error = "Error Please fill out all fields and submit again."; $("#podcast-page-contact-form-error").html(error).fadeIn().delay(5000).fadeOut(); return false; } }); //check if episode began playing on home page var playerData = localStorage.getItem(window.location.href); try { var playerData = JSON.parse(playerData); if(typeof(playerData.elapsed) != "undefined" && playerData.elapsed != "00:00:00"){ var iframeId = "embed_31581112"; var iframeSrc = $("#"+iframeId).attr("src"); newSrc = iframeSrc + "time-start/" + playerData.elapsed; $("#"+iframeId).attr('src', newSrc); localStorage.removeItem(window.location.href); } } catch (e) { //Not what we were looking for localStorage.removeItem(window.location.href); }