Comunidad Central
Comunidad Central
3018 Páginas
Añadir página
en:
Ayuda, CSS, JS

Ayuda:CSS y JS avanzado

Ver código fuente

¿Deseas crear códigos para tu comunidad, o para tu propia cuenta? Esta página tiene detalles para ayudarte en ambos casos.

Para más información general, visita Ayuda:Personalización CSS y JS.

Hoja de referencia de CSS y JS

Las tablas que se encuentran a continuación son guías sumarias de la mayoría de las páginas relacionadas con la personalización de CSS y JS. Las elecciones más comunes están resaltadas en verde.

CSS
Página de estilo Localizada en Wikis afectadas Usuarios afectados Pieles afectadas
MediaWiki:Wikia.css esta wiki esta wiki todos los usuarios Fandom (defecto)
MediaWiki:Common.css esta wiki esta wiki todos los usuarios varias
Special:MiPágina/common.css esta wiki esta wiki solo tú todas
Special:MiPágina/wikia.css esta wiki esta wiki solo tú Fandom (defecto)
w:Special:MyPage/global.css Community Central todas las wikis solo tú todas
JavaScript
Archivo de guión Localizado en Wikis afectadas Usuarios afectados Pieles afectadas
MediaWiki:Common.js esta wiki esta wiki todos los usuarios todas
MediaWiki:Wikia.js esta wiki esta wiki todos los usuarios Fandom (defecto)
Special:MiPágina/common.js esta wiki esta wiki solo tú todas
Special:MiPágina/wikia.js esta wiki esta wiki solo tú Fandom (defecto)
w:Special:MyPage/global.js Community Central todas las wikis solo tú todas

Revisor de errores en el editor de CSS y JS

Los editores de CSS y JS de Fandom tienen revisores de errores ("linting") y el resaltado de sintaxis:

  • A medida que escribe el código, la página te permitirá saber acerca de los posibles errores en la sintaxis que podrían haber ocurrido.
  • Ten en cuenta que no todos los problemas tienen que ser solucionados; la tecnología CSS (e incluso JS) está siempre en evolución, y no todos los navegadores se comportan de forma idéntica: algunos mensajes pueden no "exigir" una acción.

Problemas comunes

Problemas de CSS
Problema Explicación
@import previene descargas paralelas, utiliza <link> en su lugar

Normalmente se usan Etiquetas de enlace para importar CSS. Sin embargo, MediaWiki no admite la adición de sus propias etiquetas de enlace sin el uso de JS, por lo que este error normalmente se puede ignorar.

Espera X pero encuentra Y Esto significa que ha introducido un valor inválido para una propiedad. Por ejemplo, en 'color: foo;' foo es un valor inválido para la propiedad color, ya que no es un color.
Uso de !important !important debe evitarse generalmente en CSS, ya que puede hacerla más difícil de mantener, y también hace más difícil para los usuarios modificar la configuración en su CSS personal. La mayor parte del tiempo, utilizar el selector correcto le ayudará a evitar el uso de !important.
Propiedad desconocida 'codename' Aunque no todo el código CSS es reconocido por la herramienta (como si CSS fuera una forma de arte que se actualiza con frecuencia), determinado código CSS todavía se puede leer cuando se implementan para un determinado objeto en la página de Fandom (Por ejemplo, mix-blend-mode: color-dodge;).

Notas avanzadas

Aplicar CSS a páginas específicas
Usando clases CSS, puedes aplicar CSS a páginas específicas. El elemento <body> de los artículos de Fandom incluye un identificador único basado en el nombre de la página. Por ejemplo, en esta página de ayuda, la clase se llama:
page-Ayuda_CSS_y_JS_avanzado
El formato general es 'page-[article name]', espacios y dos puntos son reemplazados por underscores.
Existen otras clases dentro de la etiqueta <body> a las que se les puede aplicar código mediante etiquetas o espacios de nombres, y mucho más.
Cargar órdenes
El orden de carga general en Fandom es: código del núcleo, luego el código comunitario, luego el código personal.
Dentro de cada nivel, el orden de carga es: código 'common', luego el código específico de la piel.
!important en CSS
Debido a las órdenes de carga de CSS, es posible que a veces tenga que hacer uso de la propiedad !important para garantizar que se aplique una regla CSS.
Problemas con el caché
Cada archivo que descargas del Internet tiene caché. Normalmente eso es genial, ya que reduce el tráfico, tanto para su propio dispositivo como para los servidores de Fandom, pero puede ser un problema cuando se trata de probar los cambios de diseño. Puede tomar un tiempo para que los cambios surtan efecto a menos que utilice los siguientes trucos:
Nota: tras guardar, quizás necesites actualizar la caché de tu navegador para ver los cambios.
  • Firefox/Safari: Mantén presionada la tecla Mayús mientras pulsas el botón Actualizar, o presiona Ctrl+F5 o Ctrl+R (⌘+R en Mac)
  • Google Chrome: presiona Ctrl+Shift+R (⌘+Mayús+R en Mac)
  • Internet Explorer: mantén presionada Ctrl mientras pulsas Actualizar, o presiona Ctrl+F5
  • Opera: dirígete a Menú → Configuración (Opera → Preferencias en Mac) y luego a Privacidad y seguridad → Borrar datos de navegación → Imágenes y archivos en caché.


Snippets populares en JavaScript
Para tener una idea de algunos scripts que otros han escrito que le pueden resultar útil o le gustaría probar, echa un vistazo a la lista de mejoras JS en Developers Wiki.
JavaScript duplicado
Muchos scripts pueden dar problemas si se ejecutan muchas veces en la misma página. Asegúrate de que el código que ejecuta una sección determinada de programación interna sólo lo hace una vez. Evita pegar el mismo código en varios archivos, ya que es probable que provoque errores o confusiones para usted y para otros visitantes.

Más información

Ayuda y comentarios

Obtenido de «https://comunidad.fandom.com/wiki/Ayuda:CSS_y_JS_avanzado?oldid=316624»
El contenido de la comunidad está disponible bajo CC-BY-SA a menos que se indique lo contrario.