{"id":516,"date":"2021-09-21T18:42:30","date_gmt":"2021-09-21T16:42:30","guid":{"rendered":"https:\/\/spain.wordcamp.org\/2021\/?post_type=wcb_session&#038;p=516"},"modified":"2021-11-06T18:37:23","modified_gmt":"2021-11-06T17:37:23","slug":"trucos-de-css-que-deberias-conocer","status":"publish","type":"wcb_session","link":"https:\/\/spain.wordcamp.org\/2021\/session\/trucos-de-css-que-deberias-conocer\/","title":{"rendered":"Trucos de CSS que deberi\u0301as conocer"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Esta charla es un recopilatorio de trucos y pr\u00e1cticas que he aprendido a lo largo de los a\u00f1os maquetando webs con CSS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Todo el c\u00f3digo ser\u00e1 CSS nativo, sin usar pre-procesadores como SASS, LESS, etc.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Habr\u00e1 de todo un poco:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Selectores avanzados (*, &gt;, +, :not, :nth-child, [data-attribute]&#8230;)<\/li><li>Propiedades poco conocidas (flexbox gap, texto multicolumna, filters, scroll-snap, shape outside, gradientes c\u00f3nicos)<\/li><li>Accesibilidad en im\u00e1genes, animaciones y formularios tarjetas clicables en toda la superf\u00edcie sin que todo sea &lt;a&gt; ni usar JS<\/li><li>Como evitar que un texto que se convierta en negrita mueva el contenido adyacente<\/li><li>Custom properties y dark mode<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Todos los ejemplos se podr\u00e1n consultar libremente Codepen, de modo los asistentes puedan ver el c\u00f3digo y trastear tranquilamente a su aire sin tener que ir tomando nota de todo, aunque la charla quede grabada. Y, como no, todo compatible con WordPress. Aunque los ejemplos est\u00e9n en Codepen, todos est\u00e1n basado en casos reales que me he ido encontrando maquetando themes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Finalmente har\u00e9 menci\u00f3n de algunas novedades que est\u00e1n por venir o que todav\u00eda tienen poco soporte a nivel de navegadores, pero que me parecen muy interesantes. Aunque esta parte no ser\u00e1 la tem\u00e1tica principal, s\u00f3lo un \u00abcaramelito\u00bb. Este tipo de charlas de \u00abmira lo que viene\u00bb me parecen realmente muy interesantes pero a la vez un poco frustrantes, porque la mayor\u00eda de cosas a\u00fan no se pueden aplicar y te dejan con la miel en los labios.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/h19BbqzrpeM?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=es-ES&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\"><\/iframe><\/span>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Esta charla es un recopilatorio de trucos y pr\u00e1cticas que he aprendido a lo largo de los a\u00f1os maquetando webs con CSS. Todo el c\u00f3digo ser\u00e1 CSS nativo, sin usar pre-procesadores como SASS, LESS, etc. Habr\u00e1 de todo un poco: Selectores avanzados (*, &gt;, +, :not, :nth-child, [data-attribute]&#8230;) Propiedades poco conocidas (flexbox gap, texto multicolumna, &hellip; <a href=\"https:\/\/spain.wordcamp.org\/2021\/session\/trucos-de-css-que-deberias-conocer\/\" class=\"more-link\">Sigue leyendo<span class=\"screen-reader-text\"> \u00abTrucos de CSS que deberi\u0301as conocer\u00bb<\/span><\/a><\/p>\n","protected":false},"author":16023355,"featured_media":0,"template":"","meta":{"_crdt_document":"","_wcpt_session_time":1636138200,"_wcpt_session_duration":900,"_wcpt_session_type":"session","_wcpt_session_slides":"https:\/\/spain.wordcamp.org\/2021\/files\/2021\/11\/Presentacion-WCES2021-Aleix-Marti-Trucos-de-CSS-que-deberias-conocer.pdf","_wcpt_session_video":"","_wcpt_speaker_id":[408],"footnotes":""},"session_track":[20],"session_category":[24],"class_list":["post-516","wcb_session","type-wcb_session","status-publish","hentry","wcb_track-track-2","wcb_session_category-desarrollo"],"jetpack_sharing_enabled":true,"session_date_time":{"date":"05\/11\/2021","time":"19:50"},"session_speakers":[{"id":"408","slug":"aleix-marti-carmona","name":"Aleix Mart\u00ed Carmona","link":"https:\/\/spain.wordcamp.org\/2021\/speaker\/aleix-marti-carmona\/"}],"session_cats_rendered":"Desarrollo","_links":{"self":[{"href":"https:\/\/spain.wordcamp.org\/2021\/wp-json\/wp\/v2\/sessions\/516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spain.wordcamp.org\/2021\/wp-json\/wp\/v2\/sessions"}],"about":[{"href":"https:\/\/spain.wordcamp.org\/2021\/wp-json\/wp\/v2\/types\/wcb_session"}],"version-history":[{"count":2,"href":"https:\/\/spain.wordcamp.org\/2021\/wp-json\/wp\/v2\/sessions\/516\/revisions"}],"predecessor-version":[{"id":7111,"href":"https:\/\/spain.wordcamp.org\/2021\/wp-json\/wp\/v2\/sessions\/516\/revisions\/7111"}],"speakers":[{"embeddable":true,"href":"https:\/\/spain.wordcamp.org\/2021\/wp-json\/wp\/v2\/speakers\/408"}],"author":[{"embeddable":true,"href":"https:\/\/spain.wordcamp.org\/2021\/wp-json\/wporg\/v1\/users\/aleixmarti"}],"wp:attachment":[{"href":"https:\/\/spain.wordcamp.org\/2021\/wp-json\/wp\/v2\/media?parent=516"}],"wp:term":[{"taxonomy":"wcb_track","embeddable":true,"href":"https:\/\/spain.wordcamp.org\/2021\/wp-json\/wp\/v2\/session_track?post=516"},{"taxonomy":"wcb_session_category","embeddable":true,"href":"https:\/\/spain.wordcamp.org\/2021\/wp-json\/wp\/v2\/session_category?post=516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}