ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

textarea.my隐藏功能全解:如何用DevTools一行CSS自定义样式并永久写入URL

textarea.my隐藏功能全解:如何用DevTools一行CSS自定义样式并永久写入URL textarea.my隐藏功能全解如何用DevTools一行CSS自定义样式并永久写入URL【免费下载链接】textareaA minimalist text editor that lives in URL项目地址: https://gitcode.com/gh_mirrors/texta/textareatextarea.my 是一款极简的在线文本编辑器完全运行在浏览器中你写的每一个字都会被压缩后存进 URL。本文带你解锁它的隐藏功能——在 DevTools 里加一行 CSS 自定义样式字体、背景、行高随你改样式还会被自动、永久地写入 URL。把链接发出去对方打开就是同样的效果。认识 textarea.my内容全部存在 URL 里textarea.my 没有登录、没有注册、没有服务端存储保存机制只有三步输入停止约 0.5 秒后文字被deflate 压缩并 Base64 编码结果写入URL 的 # 片段地址栏变长的那串字符直接复制链接分享对方打开即恢复相同内容整个页面的逻辑都集中在一个 index.html 文件里这也为下面“样式进 URL”的隐藏玩法埋下了伏笔。隐藏功能原理样式是如何被存进 URL 的页面上唯一的编辑元素是article标签核心机制就两处保存时读取article的style属性用不可见分隔符拼在正文后面一起压缩进 URLindex.html实时监听页面用MutationObserver盯着style属性你一改样式就立即触发自动保存index.html所以样式不是“缓存”而是 URL 的一部分。打开链接时程序会把样式字符串拆出来重新应用到页面上index.html。这就是它能“永久生效”的原因。三步上手用 DevTools 一行 CSS 自定义样式第 1 步打开 textarea.my 后按F12或右键选择“检查”打开 DevTools点左上角的箭头按钮再点击页面上的文字编辑区即可选中高亮的article标签。第 2 步直接修改这个标签给它加上style属性例如stylebackground:#fffde7; font-size:20px第 3 步改完回车确认观察浏览器地址栏——URL 变长了说明样式已经永久写入。点击右下角蓝色圆点按钮选择 “Share link” 复制链接这个链接同时携带内容和样式。无需任何配置文件一行 CSS 就够了。3 个实用的自定义样式示例想要的效果在 style 里加衬线字体适合读长文font-family: Georgia, serif加宽正文区域padding-left: 10%; padding-right: 10%手动深色模式background:#111; color:#eee还可以随意组合line-height: 1.8、letter-spacing: 0.5px、max-width: 800px等属性。另外 3 个值得一试的隐藏用法# 标题设置页签标题文档第一行写成# 我的笔记浏览器标签页就会显示“我的笔记”而不是默认的 Textareaindex.htmlCtrlS/CmdS导出独立 HTML把当前内容和自定义样式打包成一个本地 HTML 文件离线也能原样打开index.html轻量 Markdown 渲染纯文本自动支持标题、粗体、斜体、删除线、行内代码和链接高亮规则见 README.md常见问题 FAQ改了样式会不会把 URL 撑爆基本不会。URL 是压缩后的结果几行内联 CSS 只会增加很少的字符。但如果文档本身很长URL 会相应变长建议用菜单里的 “Save as txt” 下载留底。想撤销自定义样式怎么办再次打开 DevTools把article上的style属性删掉或改成新值即可URL 会自动更新旧的样式就覆盖掉了。手机浏览器能用 DevTools 吗一般不行。推荐先在电脑上调好样式、复制带样式的链接再发到手机上打开——样式是跟着链接走的无需在手机上做任何设置。总结textarea.my 把极简做到了极致内容、页面标题、CSS 样式全部装进一个 URL零服务端、零注册。用 DevTools 给article加一行 CSS样式即永久生效这是它最值得一提的隐藏功能。【免费下载链接】textareaA minimalist text editor that lives in URL项目地址: https://gitcode.com/gh_mirrors/texta/textarea创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表